angular2 入出力分析

この記事は angular2 ng2 @input と @output の理解と例を中心に紹介していますが、編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

angular2 @input と @output を理解する

まずサンプルを作成し、次にコードを提供します

例:

<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)">

input, [talk]="someExp" このタグは理解できます特別なものとして、リスナーは親コンポーネントによって渡された someExp パラメータを監視し、それを自身のコンポーネントの talk 変数に格納します。バックドアを開いたように見え、親コンポーネントの someExp が入ることだけが許可されます。これはすぐに talk というセルに取り込まれ、サブコンポーネントの @Input を通じてこの変数 talk を定義して使用できます。

output, (click)="eventHandler($event.rated) これは、子コンポーネントのクリックイベントがトリガーされると、親コンポーネントのeventHandler関数が実行され、子コンポーネントのパラメータ$event.ratedが実行されることを意味します。コンポーネントのeventHandler関数が親に渡されます。ちょうど子供が泣いたとき（クリックイベントを実行）、母親がすぐに子供を抱きかかえて（母親のeventHandlerを実行）、同時に母親が何かを取得します。子のパラメータ ($event.rated )

1, @input()

親コンポーネント Father.component.ts はデータを提供します

import {Component} from "@angular/core";
@Component({
  selector: "my-father",
  templateUrl: "father.html"
})
export class FatherComponent {
  data: Array<Object>;
  constructor() {
    this.data = [
      {
        "id": 1,
        "name": "html"
      },
      {
        "id": 2,
        "name": "css"
      },
      {
        "id": 3,
        "name": "angular"
      },
      {
        "id": 4,
        "name": "ionic"
      },
      {
        "id": 5,
        "name": "node"
      }
    ]
  }
}

テンプレートファイル Father.html

<h1>父组件</h1>
// 包含子组件， 并使用属性传递数据过去
<my-child [info]="data"></my-child>

子コンポーネント child.component.ts はデータ

import {Component, Input} from "@angular/core";
@Component({
  selector: "my-child",
  templateUrl: "child.html"
})
export class ChildComponent {  
  // 使用@Input获取传递过来的数据
  @Input()
  info: Array<Object>;
  constructor() {
  
  }
}

サブコンポーネント child.html テンプレート ファイル

<ul>
  <li *ngFor="let item of info">
    {{item.name}}
  </li>
</ul>

2、@Output()

サブコンポーネントthree-link.component.ts

1を取得します。

import {Component, OnInit, Output, EventEmitter} from "@angular/core";

2. 定義出力変数

export class ThreeLinkComponent {
  province: string;
  // 输出一下参数
  @Output() provinceOut = new EventEmitter();  
  constructor() {
    this.province = "陕西";
  } 
}

3. イベントがトリガーされ、変数が親コンポーネントに出力されます

provinceChange() {
  // 选择省份的时候发射省份给父组件
  this.provinceOut.emit(this.province);
}

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

<!--三级联动组件-->
<three-link (provinceOut)="recPro($event)"></three-link>

親コンポーネント

// 函数接受子函数传递过来的变量， 子函数中emit的时候触发这个函数。
recPro(event) {
  this.province = event;
}

関連する推奨事項:

JS 実装 ドロップダウン メニューをクリックして選択したコンテンツを入力ボックスに同期する例

JS ドロップダウン メニューをクリックして選択したコンテンツを同期する入力ボックスへの実装方法

JavaScriptの戻り値をマークするoutputタグを利用したインスタンス解析

以上がangular2 入出力分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。