Angulr Core内置的@input @output方法可以完成父子组件之间的传值。
配置子组件
要使用 @Input() 装饰器，首先要导入 Input，然后用 @Input() 装饰该属性。后面用 @Output() 装饰一个属性。下面的例子中 newItemEvent 这个 @Output() 的类型为 EventEmitter，这意味着它是一个事件。如下例所示。
在子组件src/app/item-detail/item-detail.component.ts中：
import { Component, Input，Output, EventEmitter } from '@angular/core'; // import Input，Output, EventEmitter
export class ItemDetailComponent {
@Input() item = ''; // decorate the property with @Input()
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}
配置子组件的模板
在子组件模板src/app/item-output/item-output.component.html中:
<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button>
配置父组件
在父组件src/app/app.component.ts中添加条目：
export class AppComponent {
currentItem = 'Television';
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}
配置父组件的模板
在父组件模板src/app/app.component.html中使用子组件选择器：
<app-item-output [item]="currentItem" (newItemEvent)="addItem($event)"></app-item-output>
<ul> <li *ngFor="let item of items">{{item}}</li> </ul>
总结：
item和newItemEvent是子组件类中的 @Input() 和 @Output() 属性。currentItem属性和addItem()方法都位于父组件类中。