加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular2 – CUSTOM_ELEMENTS_SCHEMA添加到NgModule.schemas仍然

发布时间:2020-12-17 08:26:09 所属栏目:安全 来源:网络整理
导读:我刚刚从角色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
我刚刚从角色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跟踪错误消息的指示来保存错误。但似乎没有工作。
我究竟做错了什么?
(我希望它没有什么明显的,我现在看不到,已经花了6个小时升级到这个版本…)

谢谢!
干杯,
拉斐尔·嘻嘻

编辑

通过进行以下更改来修复它:

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读