Angular の親コンポーネントが子コンポーネントを呼び出すユースケース-jsチュートリアル-php.cn

Angular の親コンポーネントが子コンポーネントを呼び出すユースケース

php中世界最好的语言

リリース： 2018-05-02 14:49:46

オリジナル

1008 人が閲覧しました

今回は、Angular の親コンポーネントから子コンポーネントを呼び出すユースケースを紹介します。Angular の親コンポーネントを使用して子コンポーネントを呼び出す場合の注意事項は何ですか? 以下は実際的なケースです。。

コンポーネントを理解する

コンポーネントは、より単純な構成項目を使用してコンポーネントベースのアプリケーションアーキテクチャ

を構築する特別な命令であり、同様のWebコンポーネントまたはangular2スタイルを通じてアプリを簡単に作成できます。

webコンポーネントは仕様です。それがスタンダードになりつつあります。

アプリケーションコンポーネントの利点:

通常のコマンド構成よりもシンプル
より優れたデフォルト設定とベストプラクティスを提供
コンポーネントベースのアプリケーションアーキテクチャ向けにさらに最適化されています。
angular2 へのアップグレードがよりスムーズになりました。

アセンブリなしの状況:

コンパイルまたはプリリンク段階で操作を実行する必要がある命令の場合、コンポーネントはその段階に到達できないため使用できません。
命令の優先順位、端子、複数要素を定義したい場合は使用できません。
コンポーネントは要素タグを通じてのみトリガーでき、その他のコンポーネントはコマンドによってのみトリガーできます。

view子供デコレータ。

親コンポーネントのテンプレートと

コントローラーは子コンポーネントのAPIを呼び出します。

1. 親コンポーネントが呼び出す挨拶メソッドを 1 つだけ持つ子コンポーネント child1 を作成します。

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-child1',
 templateUrl: './child1.component.html',
 styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {
 constructor() { }
 ngOnInit() {
 }
 greeting(name: string) {
 console.log("hello" + name);
 }
}

ログイン後にコピー

2. 親コンポーネントでは、テンプレート内でテンプレートローカル変数を使用して呼び出され、コントローラー内で ts コードを使用して呼び出されます。

親コンポーネントは 2

を書き込み、親コンポーネントのコントローラーで viewChild デコレータで装飾された変数をそれぞれ <app-child>

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

ログイン後にコピー

を指定して、子コンポーネントの

reference を取得します。

テンプレート変数 child1 の名前から対応するサブコンポーネントを見つけて、それを child1 変数に割り当てます。参照を取得したら、サブコンポーネントメソッドを呼び出すことができます。

@ViewChild('child1')
child1:Child1Component; //父组件中获得子组件的引用
ngOnInit(){
 this.child1.greeting("Tom");
}

ログイン後にコピー

4、親コンポーネントのテンプレートで子コンポーネントのメソッドを呼び出します。

親コンポーネントのテンプレートにボタンを追加し、クリックされたときに子コンポーネント child2 の挨拶メソッドを呼び出します。

<app-child1 #child1> </app-child1>
<app-child1 #child2> </app-child1>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

nodejsのマルチバージョン管理の使用方法の詳細な説明

Vueでのスロット/スコープの使用の詳細な説明

以上がAngular の親コンポーネントが子コンポーネントを呼び出すユースケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。