我将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
并在header component
文件的entryComponetnt
中设置app.module.ts
...
app.module.ts
import { HeaderModule } from './shared/modules/header/header.module';
imports: [
FormsModule,
HeaderModule
],
entryComponents:[HeaderComponent]
问题是,当我转到dashboard
页面时,我正在获取标题。而且我在console
中没有收到任何错误。
答案 0 :(得分:0)
我只是在仪表板的html文件中添加我的共享组件的selector
值。
<app-header></app-header>
对我有用!