angular2 input and output analysis

This article mainly introduces the understanding and examples of angular2 ng2 @input and @output. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

angular2 @input and @output understanding

First make an example, and then provide the code

For example:

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

input, [talk]="someExp" This tag can be understood as a special listener that listens to the someExp parameter passed by the parent component and stores it in the talk of its own component. Change; it seems to have opened a backdoor, allowing and only allowing someExp of the parent component to enter. Once entered, it is immediately captured into a cell called talk, and then the variable talk can be defined through @Input in the child component and then used.

output, (click)="eventHandler($event.rating) This means that when the click event of the child component is triggered, the eventHandler function of the parent component is executed and the parameters of the child component $event. The rating is passed to the eventHandler function of the parent component; just like when a child cries (executes the click event), his mother immediately holds him in her arms (executes the mother's eventHandler), and at the same time the mother obtains some parameters of the child ( $event.rating)

1, @input()

The parent component father.component.ts provides data

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"
      }
    ]
  }
}

Template file father.html

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

Sub component child.component.ts Get data

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

Child component child.html template file

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

2, @Output()

Child component three-link.component.ts

1. Introduction

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

2. Define output variables

##

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

3. Event trigger , emit variables to the parent component

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

Parent component template

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

Parent component

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

Related recommendations:

JS implementation of clicking the drop-down menu to synchronize the selected content to the input input box

JS clicks the drop-down menu to synchronize the selected content to the input input box. Implementation method

Instance analysis of using the output tag to mark JavaScript return values

The above is the detailed content of angular2 input and output analysis. For more information, please follow other related articles on the PHP Chinese website!