Angular コンポーネントはどのように通信するのでしょうか?親子コンポーネント通信の 2 つの方法

この記事では、Angularにおけるコンポーネント通信を理解し、親コンポーネントと子コンポーネント間の通信、および直接関係のないコンポーネント間の通信の方法を紹介します。

実際のアプリケーションでは、コンポーネントはツリー構造で関連付けられるため、コンポーネント間の関係は主に次のとおりです。

• 父と息子の関係

• #兄弟関係

• ##直接的な関係なし
  ##【 関連チュートリアル推奨事項: "
angular チュートリアル

"]

環境の準備:1.

ng g c コンポーネント/ヘッダー

export class HeaderComponent implements OnInit { constructor() {} ngOnInit(): void {} }

ng g c コンポーネント/タイトル

{{title}}

export class TitleComponent implements OnInit { public title: string = '标题'; constructor() {} ngOnInit(): void {} }

ng g cComponents/button

{{ btnName }}

export class ButtonComponent implements OnInit { public btnName: string = '按钮'; constructor() {} ngOnInit(): void {} }

## を直接呼び出します。#親子関係コンポーネントに適用されます。直接呼び出しにより親子コンポーネントの結合が高まることに注意してください。明確にするために、直接呼び出しが必要です。

1. アプリとヘッダーの間に親子コンポーネント関係が形成されるように、ヘッダー コンポーネントをアプリにマウントします。2.

を使用します。 # コンポーネントに名前を付けます:

3。ヘッダー コンポーネントはまだ非常に空です。展開しましょう。そうでない場合、何を呼び出すか?

export class HeaderComponent implements OnInit { public name: string = 'HeaderComponent'; printName(): void { console.log('component name is', this.name); } }

 
 调用子组件属性: {{ header.name }} 调用子组件函数 

5 のサブコンポーネント ヘッダーにあるプロパティと関数を呼び出すことができます。操作はコンポーネントの HTML テンプレートで実行されますが、場合によっては、親コンポーネントの ts クラスでサブコンポーネントを操作する必要もあります。次に説明します。

6. 新しいデコレーター

export class AppComponent { title = 'angular-course'; @ViewChild(HeaderComponent) private header!: HeaderComponent; // 声明周期钩子: 组件及子组件视图更新后调用,执行一次 ngAfterViewInit(): void { // 调用子组件属性 console.log(this.header.name); // 调用子组件函数 this.header.printName(); } }

@Input および @Output

を使用する必要があります。親子関係コンポーネントに適用可能

1.headerコンポーネントで

を定義することで、この問題を解決します。結合されたtitleコンポーネントでの直接呼び出しは、複雑な展開の問題を引き起こします2.title# のtitle

@Input() public title: string = 'Title';3. ヘッダー コンポーネントに title 属性を追加し、値を割り当てます:public title : string = 'I am New title';

header## のhtmlテンプレートで

コンポーネントを使用します。 # コンポーネントは次のとおりです:5. ここまでの効果を見てみましょう。インターフェイスは見にくいですが、次回はこのコンポーネントを使用しますtitle?

6 を設定したほうが便利ですか。上記の手順により、親コンポーネントのデータが子コンポーネントに渡されるので、続けましょう 子コンポーネントのデータがどのように親コンポーネントに渡されるかを見てみましょう?@Output()

7.

コンポーネントでtitleChange属性を ts クラスに追加します:

8.titleコンポーネントの ts クラス

ngOnInit(): void { // 定时将子组件的数据进行派发 setInterval(() => { this.titleChange.emit(this.title); }, 1500); }

onChildTitleChange(value: any) { console.log('onChildTitleChange: >>', value); }

コミュニケーションのためにサービスの単純な関心を使用する

直接関係のないコンポーネントに適用されます

1. サービスを通じて通信する必要があるため、まずサービスng s services/EventBus

Subject## の属性を宣言します。 # コミュニケーションを支援するためです

@Injectable({ providedIn: 'root', }) export class EventBusService { public eventBus: Subject = new Subject(); constructor() {} }

headerのボタン コンポーネントとタイトル コンポーネントは直接的な関係がないコンポーネントであるため、コンポーネントは再作成されませんでした。関係。3.button

triggerEventBus関数

export class ButtonComponent implements OnInit { public btnName: string = '按钮'; constructor(public eventBusService: EventBusService) {} ngOnInit(): void {} public triggerEventBus(): void { this.eventBusService.eventBus.next('我是按钮组件'); } }

titleコンポーネント内のシミュレートされたデータの取得

export class TitleComponent implements OnInit { constructor(public eventBusService: EventBusService) {} ngOnInit(): void { this.eventBusService.eventBus.subscribe((value) => { console.log(value); }); } }

1. これは非常に簡単です。デモには引き続きtitleコンポーネントとbuttonコンポーネントを使用します。今回は、タイトル コンポーネントにデータを保存します。 buttonコンポーネントからデータを取得します。localstorageのみを説明します。他はすべて同じです。

以上がAngular コンポーネントはどのように通信するのでしょうか?親子コンポーネント通信の 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。