ホームページ > 記事 > ウェブフロントエンド > angular2 入出力分析

angular2 入出力分析

小云云オリジナル: 2018-01-25 12:00:511278ブラウズ

この記事は 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;
}

angular2 入出力分析

関連記事