Angular2でコンポーネントインタラクションを実装する方法

この記事では、Angular2でコンポーネント連携を実現する方法を中心に、Angular2でのコンポーネント連携の関連操作スキルや注意事項をサンプル形式でまとめて分析していますので、困っている方は参考にしてください

Angular2 でコンポーネントの相互作用を実現する方法。以下のように、参考のために全員と共有してください:

前書き

Angular 開発では、自分の部門が開発したコンポーネントを参照するなど、コンポーネント間の対話が頻繁に行われます
場合によっては、いくつかのデータをバインドする必要があることがあります。参照されるコンポーネント、またはデータを出力するために参照されるサブコンポーネントが必要です。この時点で、サブコンポーネント

サブコンポーネント

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

親コンポーネント

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

へのデータを定義する必要があります。ここでのサブコンポーネントの @Input は、エンティティ hero が必要であることを示します。その後、親コンポーネントがサブコンポーネントを導入するときに、サブコンポーネントのタグに hero を記述する必要があります。同時に、独自のコンポーネント内で hero に値を代入することでバインディングが実現されます。親コンポーネントが子コンポーネントを導入した後、親コンポーネントは子コンポーネントのイベントをリッスンしてブール値を親コンポーネントに渡します。子コンポーネントのメソッドを独自のメソッドにバインドすることで子コンポーネントを監視する効果

入力属性をインターセプトするセッター

サブコンポーネント

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

親コンポーネント

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

親コンポーネントがサブコンポーネントを参照した後、データをサブコンポーネントにバインドし、サブコンポーネントは set および get を通じて親コンポーネントから渡されたデータを変更および表示します

親コンポーネントとサブコンポーネントはローカル変数を通じて相互作用します

サブコンポーネント

<h3>"{{name}}"</h3>
private _name = &#39;&#39;;
@Input()
set name(name: string) { this._name = (name && name.trim()) || &#39;<no name set>&#39;; }
get name(): string { return this._name; }

親コンポーネント

<name-child [name]="myname"></name-child>

サブコンポーネントは変数とメソッドを定義します。親コンポーネントがサブコンポーネントのタグを参照した後、タグ内にローカル変数を設定してサブコンポーネントを表し、変数を使用して変数とメソッドにアクセスできます。サブコンポーネント

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。 関連記事:

AngularでorderByソートとファジークエリを実装する方法

vue vuex vue-rouertパーミッションルーティング（詳細なチュートリアル）

JavaScriptでキーボードのkeyCodeを取得する方法

以上がAngular2でコンポーネントインタラクションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。