angular4中所有组件如何使用共享模块？

Question

我正在使用 Angular 4 和 material。我有两个主要组成部分......

1) Login and 2) Dashboard

dashboard 中有延迟加载组件，如 profile 、 employee 等... 我想设置 header 并且为此我使用了 <mat-toolbar>

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>My application</span>
    <span class="example-spacer"></span>

    <button mat-button>Logout</button>
  </mat-toolbar-row>  
</mat-toolbar>

组件文件是这个.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

 constructor() { }

 ngOnInit() {
 }
}

要在所有 dashboard 中使用此组件，我创建了一个 shared module 文件。

在src/app/shared/modules/header/header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from 
     '../../../shared/components/header/header.component';
import { MaterialModule } from '../../../material.module';
@NgModule({
imports: [
  CommonModule,
  MaterialModule      
],
declarations: [HeaderComponent],
exports:[HeaderComponent]
})
export class HeaderModule { }

我在模块文件中有 import 组件并放入 exports 所以，我想我可以使用 header 组件。

现在我正尝试在 dashboard 组件中使用它。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { MaterialModule } from '../material.module';
import { HeaderModule } from '../shared/modules/header/header.module';

@NgModule({
imports: [
  CommonModule,
  DashboardRoutingModule,
  MaterialModule,
  HeaderModule    
],
declarations: [DashboardComponent]
})
export class DashboardModule { }

我还导入了 module 并在 app.module.ts 文件的 entryComponetnt 中设置了 header component...

app.module.ts

import { HeaderModule } from './shared/modules/header/header.module';
imports: [
 FormsModule,       
 HeaderModule
],
entryComponents:[HeaderComponent]

问题是当我转到 dashboard 页面时我得到 header。而且我在 console 中也没有收到任何错误。

Answer 1

我只是在仪表板的 html 文件中添加了共享组件的 selector 值。

<app-header></app-header>

对我有用！

angular4中所有组件如何使用共享模块？

How to use shared module in all components in angular 4?

module

export

components

angular4-router