angular2 – CUSTOM_ELEMENTS_SCHEMA添加到NgModule.schemas仍然
我刚刚从角色2 rc4升级到rc6,并有麻烦这样做。
我在我的控制台上看到以下错误: Unhandled Promise rejection: Template parse errors: 'cl-header' is not a known element: 1. If 'cl-header' is an Angular component,then verify that it is part of this module. 2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main> [ERROR ->]<cl-header>Loading Header...</cl-header> <div class="container-fluid"> <cl-feedbackcontai"): AppComponent@1:4 这是我的标题组件: import { Component } from '@angular/core'; import { Router } from '@angular/router'; // own service import { AuthenticationService } from '../../../services/authentication/authentication.service.ts'; import '../../../../../public/css/styles.css'; @Component({ selector: 'cl-header',templateUrl: './header.component.html',styleUrls: ['./header.component.css'] }) export class HeaderComponent { // more code here... } 这是我的标题模块: import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HeaderComponent } from './../../../components/util_components/header/header.component.ts'; @NgModule({ declarations: [ HeaderComponent ],bootstrap: [ HeaderComponent ],imports: [ RouterModule,CommonModule,FormsModule ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class HeaderModule { } 我创建了一个称为util模块的包装器模块,它导入HeaderModule: import { NgModule } from '@angular/core'; import {HeaderModule} from "./header/header.module"; // ... @NgModule({ declarations: [ ],bootstrap: [ ],imports: [ HeaderModule] }) export class UtilModule { } 最终由AppModule导入: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {UtilModule} from "./modules/util_modules/util.module"; import {RoutingModule} from "./modules/routing_modules/routing.module"; @NgModule({ bootstrap: [AppComponent],declarations: [AppComponent],imports: [BrowserModule,UtilModule,RoutingModule] }) export class AppModule { } 为了我的理解,我使用SCHEMA跟踪错误消息的指示来保存错误。但似乎没有工作。 谢谢! 编辑 通过进行以下更改来修复它: UtilModule: import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import {HeaderModule} from "./header/header.module"; // ... @NgModule({ declarations: [ ],imports: [ HeaderModule],schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class UtilModule { } AppModule: import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import {UtilModule} from "./modules/util_modules/util.module"; import {RoutingModule} from "./modules/routing_modules/routing.module"; @NgModule({ bootstrap: [AppComponent],RoutingModule],schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class AppModule { } 所以我想有人必须在每个模块或某些东西上使用该架构。
只是想增加一点点。
使用新的角度2.0.0最终版本(2016年9月14日),如果您使用自定义html标签,则会报告该模板解析错误。自定义标签是您在HTML中使用的标签,不是these tags之一。 它看起来像线路模式:[CUSTOM_ELEMENTS_SCHEMA]需要添加到您使用自定义HTML标签的每个组件。 编辑:模式声明需要在@NgModule装饰器中。下面的示例显示了一个具有自定义组件CustomComponent的自定义模块,该组件允许html模板中的该组件的任何html标签。 custom.module.ts import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CustomComponent } from './custom.component'; @NgModule({ declarations: [ CustomComponent ],exports: [ CustomComponent ],imports: [ CommonModule ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class CustomModule {} custom.component.ts import { Component,OnInit } from '@angular/core'; @Component({ selector: 'my-custom-component',templateUrl: 'custom.component.html' }) export class CustomComponent implements OnInit { constructor () {} ngOnInit () {} } custom.component.html 在这里,您可以使用任何您想要的HTML标签。 <div class="container"> <boogey-man></boogey-man> <my-minion class="one-eyed"> <job class="plumber"></job> </my-minion> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |