angular实现全局组件

之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在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>