angular实现全局组件

之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在declares:[component],然后exports出该组件。最后在页面中每次导入该组件，而这次我们将采用另一种方式来实现

1 新建公用组件：

navbreadcrumbnavbreadcrumb.component.htmlnavbreadcrumb.component.cssnavbreadcrumb.component.tsnavbreadcrumb.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>