Angular はグローバル コンポーネントを実装します

以前は、グローバル コンポーネントの最初の方法を実装しました。コンポーネントを定義するときは、[component] を宣言してからコンポーネントをエクスポートします。最後に、ページ内で毎回コンポーネントをインポートします。今回は別の方法を使用してそれを実現します。

1 新しいパブリック コンポーネントを作成します。

navbreadcrumb
  navbreadcrumb.component.html
  navbreadcrumb.component.css
  navbreadcrumb.component.ts
 navbreadcrumb.module.ts
   

2 新しい share.module.ts を作成し、すべてのパブリック コンポーネントをこのモジュールに導入します。この例では、ナビゲーション コンポーネントは NavbreadcrumbComponent だけです。

（ 共有 /。共有.モジュール.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>