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

Question

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

Answer 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 {}

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

after using CUSTOM_ELEMENTS_SCHEMA custom tag's content still not visible

html

karma-jasmine

angular2-template

angular