之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件,而这次我们将采用另一种方式来实现
1 新建公用组件:
navbreadcrumb
navbreadcrumb.component.html
navbreadcrumb.component.css
navbreadcrumb.component.ts
navbreadcrumb.module.ts
2 新建一个share.module.ts,在该module中引入我们所有的公共组件,本例中只有一个导航组件NavbreadcrumbComponent
( share /. share.module.ts)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavbreadcrumbComponent} from "../navbreadcrumb/navbreadcrumb.component"
@NgModule({
declarations: [NavbreadcrumbComponent],
imports: [
CommonModule
],
exports:[NavbreadcrumbComponent]
})
export class ShareModule { }
3 在需要用到该组件的页面中引入share.module.ts模块(home.ts.about.ts分别引入)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShareModule } from '../../share/share.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
ShareModule
]
})
export class HomeModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShareModule } from '../../share/share.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
ShareModule
]
})
export class AboutModule { }
4 在页面中引入组件结构:
<div class="about_page">
<app-navbreadcrumb></app-navbreadcrumb>
<div></div>
</div>