之前我们实现全局组件的第一种方式。我们是在定义了组件的时候通过在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 在页面中引入组件结构：文章来源：https://www.toymoban.com/news/detail-656770.html
<div class="about_page">
<app-navbreadcrumb></app-navbreadcrumb>
<div></div>
</div>文章来源地址https://www.toymoban.com/news/detail-656770.html
到了这里，关于angular实现全局组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
