使用 CUSTOM_ELEMENTS_SCHEMA 自定义标签的内容后仍然不可见答案

【问题标题】：after using CUSTOM_ELEMENTS_SCHEMA custom tag's content still not visible使用 CUSTOM_ELEMENTS_SCHEMA 自定义标签的内容后仍然不可见
【发布时间】：2018-02-12 21:00:39
【问题描述】：

我有这样的场景：有三个模块，header.module、_shared.module 和 app.module。 header.module 导入和导出标题组件。 _shared.module 充当包装模块并导入 header.module。 app.module 最终导入了_shared.module。最后，我通过它的选择器使用标题，例如 app.component.html 中的<dir-header>。我什至在 app.module 中包含了 CUSTOM_ELEMENTS_SCHEMA 以抑制可能出现的任何错误。但是我再也看不到标题了，虽然标签<dir-header></dir-header>在DOM中有，但它的内容<div class="..." >...</div>没有。

header.module:-

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HeaderComponent } from './header.component';
import { HeaderRoutingModule } from './header-routing.module';

@NgModule({
    declarations: [
        HeaderComponent
    ],
    imports: [HeaderRoutingModule, ReactiveFormsModule, CommonModule],
    exports: [
        HeaderComponent
    ]
})

export class HeaderModule {}

_shared.module:-

import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeaderModule,
        FooterModule
    ],
    declarations: [],
    exports: []
})
export class SharedModule {}

app.module:-

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
/*rest of the code*/
@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: 
    [...
       SharedModule,
    ...
    ],
  providers: [CrudService, ...],
  bootstrap: [AppComponent]
})
export class AppModule { }

编辑：它不是从header.module 导入<header-dir>，而是在app.component.html 中创建一个新的自定义选择器。如何从 header.module 导入标头？

【问题讨论】：

标签： html angular karma-jasmine angular2-template

【解决方案1】：

[问题已解决] 首先，从 app.module 中删除 CUSTOM_ELEMENTS_SCHEMA，因为在这种情况下它并不是真正需要的。接下来，在exports 部分下的_shared.module 中，还导出您在此处导入的自定义模块，即header.module 和foot.module：-

_shared.module

import { NgModule}       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { FormsModule }    from '@angular/forms';
import { HeaderModule } from './header/header.module';
import { FooterModule } from './footer/footer.module';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeaderModule,
        FooterModule
    ],
    declarations: [],
    exports: [HeaderModule,
        FooterModule]
})
export class SharedModule {}

【讨论】：