使用 ng2 实现时 Angular 4 中的 jQuery 问题

Question

https://sherweb.github.io/ng2-materialize/home

大家好。我正在和一个doozie打交道。最糟糕的问题......曾经有效但现在无效的问题。所以我知道它可以工作......只是现在不行。我正在尝试在我的 Angular 4 应用程序中使用物化 css。为了真正理解这个问题，我只是在完成详细教程之前开始了一个新项目。然后，一旦安装并看似工作，我尝试在我的user.module.ts 中放置一个选择的 HTML 字段。该页面可以正常加载，但是当我在选择之外单击以使选项消失时会出现错误。

我感觉我的问题是模块中导入的位置不正确。从他们从动画开始到用法结束的描述中，我不知道或不知道老师指的是哪个模块放置导入。我的理解是动画部分需要进入app.module.ts，并且浏览器动画模块需要进入将利用物化的模块。

以下是我对说明的解释。然后下面是我在尝试使用选择 HTML 标记时收到的错误。感谢收看！

.angular-cli.json

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "rock-radar-front"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
          "../node_modules/materialize-css/dist/css/materialize.css",
          "../node_modules/mdi/css/materialdesignicons.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/materialize-css/dist/js/materialize.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
  "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

tsconfig

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "jquery",
      "materialize-css"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
 ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.module.ts（用户模块位于应用文件夹内的用户组件中）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterializeModule } from 'ng2-materialize';
import { UserComponent } from "./user.component";

@NgModule({
  imports: [
    CommonModule,
    MaterializeModule
  ],
  declarations: [UserComponent]
})
export class UserModule { }

终于听到我遇到的错误。如果我移动进口，我会得到不同的错误，但在目前的状态下，我认为它告诉我它甚至无法识别进口。如果你能看到我在哪里玩，请告诉我！谢谢

compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'label' since it isn't a known property of 'select'. ("
  <select multiple mz-select
    id="options-select"
    [ERROR ->][label]="'Label'"
    [placeholder]="'Placeholder'"
  >
"): ng:///AppModule/UserComponent.html@3:4
Can't bind to 'placeholder' since it isn't a known property of 'select'. ("
    id="options-select"
    [label]="'Label'"
    [ERROR ->][placeholder]="'Placeholder'"
  >
    <optgroup label="Group 1">
"): ng:///AppModule/UserComponent.html@4:4
'mz-select-container' is not a known element:
1. If 'mz-select-container' is an Angular component, then verify that it is part of this module.
2. If 'mz-select-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mz-select-container>
  <select multiple mz-select
    id="options-select"
"): ng:///AppModule/UserComponent.html@0:0
        at syntaxError (http://localhost:4200/vendor.bundle.js:24056:34)
    at 
  TemplateParser.webpackJsonp.../../../compiler
/@angular/compiler.es5.js.TemplateParser.parse 
(http://localhost:4200/vendor.bundle.js:35176:19)
    at JitCompiler.webpackJsonp.../../../compiler/@
angular/compiler.es5.js.JitCompiler._compileTemplate 
(http://localhost:4200/vendor.bundle.js:49328:39)
    at http://localhost:4200/vendor.bundle.js:49248:62
    at Set.forEach (native)
    at 
  JitCompiler.webpackJsonp.../../../compiler/
    @angular/compiler.es5.js.JitCompiler._compileComponents 
(http://localhost:4200/vendor.bundle.js:49248:19)
    at http://localhost:4200/vendor.bundle.js:49135:19
    at Object.then (http://localhost:4200/vendor.bundle.js:24045:156)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.
es5.js.JitCompiler._compileModuleAndComponents
 (http://localhost:4200/vendor.bundle.js:49134:26)
    at 
 JitCompiler.webpackJsonp.../../../compiler/@angular/
compiler.es5.js.JitCompiler.compileModuleAsync 
(http://localhost:4200/vendor.bundle.js:49063:37)

Answer 1

这个问题是由于我在 chrome 中使用的网络扩展造成的。我讨厌事实证明这是个问题……对不起，伙计们