-
StackOverflow 文档
-
Angular 教程
-
在组件之间共享数据
-
使用 Input 通过数据绑定将数据从父组件发送到子组件
parent.component.ts:
import {Component} from '@angular/core';
@Component({
selector: 'parent-example',
templateUrl: 'parent.component.html',
})
export class ParentComponent {
mylistFromParent = [];
add() {
this.mylistFromParent.push({"itemName":"Something"});
}
}
parent.component.html:
<p> Parent </p>
<button (click)="add()">Add</button>
<div>
<child-component [mylistFromParent]="mylistFromParent"></child-component>
</div>
child.component.ts:
import {Component, Input } from '@angular/core';
@Component({
selector: 'child-component',
template: `
<h3>Child powered by parent</h3>
{{mylistFromParent | json}}
`,
})
export class ChildComponent {
@Input() mylistFromParent = [];
}