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

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

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

• 父と息子の関係

• #兄弟関係

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

"]

環境の準備: 1.

header# を作成します。 ##コンポーネント:

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

<app-button></app-button>
<app-title></app-title>
<app-button></app-button>

export class HeaderComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
}

2. title

コンポーネントを作成します:

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

<span>{{title}}</span>

export class TitleComponent implements OnInit {

  public title: string = '标题';

  constructor() {}

  ngOnInit(): void {}
}

3. button

コンポーネントを作成します:

ng g cComponents/button

<button>{{ btnName }}</button>

export class ButtonComponent implements OnInit {
  public btnName: string = '按钮';

  constructor() {}

  ngOnInit(): void {}
}

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

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

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

3。ヘッダー コンポーネントはまだ非常に空です。展開しましょう。そうでない場合、何を呼び出すか?<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export class HeaderComponent implements OnInit { public name: string = &amp;#39;HeaderComponent&amp;#39;; printName(): void { console.log(&amp;#39;component name is&amp;#39;, this.name); } }</pre><div class="contentsignin">ログイン後にコピー</div></div>4。コンポーネントが展開された後、親コンポーネント app

<app-header #header></app-header>
<p>
  调用子组件属性: {{ header.name }}
  <button (click)="header.printName()">调用子组件函数</button>
</p>

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

6. 新しいデコレーター

@ViewChild(Component)

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

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

属性に @Input() 装飾を追加します。 ## コンポーネント コンテナ:

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

4.

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

title

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

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

デコレータを使用して次のコードを実装しましょう

7.

title

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

@Output() public titleChange = new EventEmitter();

8. title コンポーネントの ts クラス <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">ngOnInit(): void { // 定时将子组件的数据进行派发 setInterval(() =&gt; { this.titleChange.emit(this.title); }, 1500); }</pre><div class="contentsignin">ログイン後にコピー</div></div>9 にデータを定期的にディスパッチします。次に、ヘッダーの親コンポーネントを変更して、ディスパッチされたデータを受信しましょう:

<app-title 
	[title]="title" 
  (titleChange)="onChildTitleChange($event)">
</app-title>

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

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

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

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

を作成し、タイプ

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

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

  constructor() {}
}

2. トラブルを避けるため、

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('我是按钮组件');
  }
}

4 をトリガーするクリック イベントを追加します。

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

export class TitleComponent implements OnInit {

  constructor(public eventBusService: EventBusService) {}

  ngOnInit(): void {
    this.eventBusService.eventBus.subscribe((value) => {
      console.log(value);
    });
  }
}

Cookie、セッション、またはローカルストレージを使用して通信

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

2.

title コンポーネントの ngOnInit() フックの title を localstorage に保存します: window.localStorage.setItem('title', this.title);

3. ボタン コンポーネントのデータを取得します:

const title = window.localStorage.getItem('title');

結論:

この記事では、分割されたコンポーネントが適切な通信を実行できるように、Angular のコンポーネント通信を紹介しました。は保証を提供しており、これまでのコンポーネントの使用はタグの導入によって行われていました。

元のアドレス: https://juejin.cn/post/6991471300837572638

著者: Xiaoxin

プログラミング関連の知識について詳しくは、次のサイトをご覧ください。 :

プログラミング入門! ！

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