Angular——事件2——父子组件传值

 如何使用@Input()

在子组件或指令中使用装饰器，以使Angular知道该组件中的属性可以从其父组件接收其值。有助于记住数据流是从子组件的角度来看的。因此，允许将数据从父组件输入到子组件中。@Input()@Input()

在子

要在子组件类中使用装饰器，请首先导入，然后用来装饰 属性：@Input()Input@Input()

src / app / item-detail / item-detail.component.ts

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
  @Input() item: string; // decorate the property with @Input()
}

在这种情况下，装饰的特性，其具有的类型，然而，属性可具有任何类型，例如 ，，，或。的值将来自下一部分将介绍的父组件。@Input()itemstring@Input()numberstringbooleanobjectitem

接下来，在子组件模板中，添加以下内容：

src / app / item-detail / item-detail.component.html

<p>
  Today's item: {{item}}
</p>

在父

下一步是将属性绑定到父组件的模板中。在此示例中，父组件模板为app.component.html。

首先，将孩子的选择器here <app-item-detail>用作父组件模板中的指令。然后，使用属性绑定 将子级中的属性绑定到父级中的属性。

src / app / app.component.html

<app-item-detail [item]="currentItem"></app-item-detail>

接下来，在父组件类中app.component.ts，为指定一个值currentItem：

src / app / app.component.ts

export class AppComponent {
  currentItem = 'Television';
}

 如何使用@Output()

使用的子组件或指令装饰允许数据从孩子流出来父。@Output()

一个属性通常应被初始化为角与组件作为值流出事件。@Output()EventEmitter

 

在子

此示例的特点<input>是用户可以在其中输入值并单击<button>引发事件的。在EventEmitter然后将数据中继到父组件。

首先，请确保导入Output并且EventEmitter 在子组件类中：

import { Output, EventEmitter } from '@angular/core';

export class ItemDetailComponent { @Output() newItemEvent = new EventEmitter<string>(); }

1. @Output()—装饰器函数，将属性标记为数据从子级到父级的一种方式
2. newItemEvent—的名称 @Output()
3. EventEmitter<string>— 的类型@Output()
4. new EventEmitter<string>()—告诉Angular创建一个新的事件发射器，并且它发射的数据为字符串类型。该类型可以是任何类型，如number，boolean等。有关更多信息EventEmitter，请参阅EventEmitter API文档。

 

export class ItemOutputComponent {

  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

 

在孩子的模板

孩子的模板有两个控件。第一个是一个HTML <input>与 模板参考变量，#newItem其中用户键入的项目名称。无论用户键入什么，<input>都将存储在#newItem变量中。

src / app / item-output / item-output.component.html

content_copy<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>

第二个元素是<button> 带有事件绑定的。您知道这是事件绑定，因为等号左侧的部分在括号中(click)。

该(click)事件绑定到addNewItem()子组件类中的方法，无论其值#newItem是什么，该方法都将其作为参数。

现在，子组件具有一个 用于将数据发送给父组件的组件和一个引发事件的方法。下一步是在父级中。@Output()

 

在父

在此示例中，父组件是AppComponent，但是您可以使用可以在其中嵌套子组件的任何组件。

的AppComponent在本例中设有的列表items 的阵列以及用于将多个项目的阵列的方法。

src / app / app.component.ts

content_copyexport class AppComponent {
  items = ['item1', 'item2', 'item3', 'item4'];

  addItem(newItem: string) {
    this.items.push(newItem);
  }
}

该addItem()方法采用字符串形式的参数，然后将该字符串推入或添加到items数组中。

在父母的模板

接下来，在父级模板中，将父级方法绑定到子级事件。将此处的子选择器放在<app-item-output>父组件的模板中app.component.html。

src / app / app.component.html

content_copy<app-item-output (newItemEvent)="addItem($event)"></app-item-output>

事件绑定(newItemEvent)='addItem($event)'告诉Angular将子级中的事件连接newItemEvent到父级中的方法addItem()，并且子级通知父级的事件将作为的参数addItem()。换句话说，这是实际移交数据的地方。在$event包含数据的用户类型为<input> 在子模板UI。

现在，为了查看工作原理，将以下内容添加到父级的模板中：@Output()

content_copy<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

该遍历中的项目阵列。当您在子项中输入值并单击按钮时，子项将发出事件，父项的方法会将值推入数组，然后将其呈现在列表中。*ngForitems<input>addItem()items