angle2 입력 및 출력 분석

小云云원래의: 2018-01-25 12:00:511228검색

이 글은 주로 angle2 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) 이는 하위 컴포넌트의 click 이벤트가 발생하면 상위 컴포넌트의 eventHandler 함수가 실행되고 하위 컴포넌트의 $event.rated 매개변수가 발생한다는 의미입니다. 자식이 울 때(클릭 이벤트 실행), 어머니가 즉시 그를 품에 안고(어머니의 eventHandler 실행) 동시에 어머니가 일부를 획득하는 것과 마찬가지로 구성 요소의 eventHandler 함수가 부모에게 전달됩니다. 하위 매개변수($event.rated )

1, @input()

부모 구성 요소 father.comComponent.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>

The 하위 구성 요소 child.comComponent.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.comComponent.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;
}

angle2 입력 및 출력 분석

관련 기사