一、父组件传给子组件
1、子组件接收父组件传入的数据
在子组件中,用@input标记要从父组件获取的数据变量名,@input() hero:HERO[],父组件的html模板中用[子组件变量名] = "父组件变量名"绑定
example:
父组件:
子组件
2、用set 和get来处理父组件传入的数据,和第一种的区别就是set相当于用一个函数处理了一下传入数据,再用get返回
父组件传入的是name变量
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
其中names的值是,带有一个是空格的名字
names = ['Mr. IQ', ' ', ' Bombasto '];
子组件set name()和get name()的name要和父组件传绑定对的变量名一致
@Component({
selector: 'app-name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
private _nam = '';
@Input()
set name(name1: string) {
this._nam = (name1 && name1.trim()) || '<no name set>';
}
get name(): string { return this._nam; }
}
3、用onChanges,
ngOnchanges在父组件初始化或修改子组件的输入参数下调用,用在有输入属性的子组件上。
(转载https://blog.youkuaiyun.com/baobab_cc/article/details/79227862)
在什么情况下调用?:当修改子组件参数时,只有以下情况ngOnchanges才会被调用
- 子组件的参数为输入属性且为不可变对象变化时
- 输入属性:@Input()属性
- 不可变对象:原始值(undefined、null、布尔值、数字和字符串)
- 可变对象:对象(包括数组和函数)
只有修改不可变对象时才会调用 onChanges,调用可变对象时不会调用。和前两种不同,前两种趋向于静态的,onChanges是动态的,父组件参数会改变,子组件随父组件改变
二、子组件传给父组件,@Output和EventEmitter<>(),emit
1、通过事件来交互
父组件html模板中的子组件,voted来自子组件,是一个事件发射器,onVoted是父组件的,处理子组件发射到父组件的事件。
<app-voter *ngFor="let voter of voters"
[name]="voter"
(voted)="onVoted($event)">
子组件代码
@Output() voted = new EventEmitter<boolean>();
vote(agreed: boolean) {
this.voted.emit(agreed);
this.didVote = true;
}
2、#方法插在子组件标签里代表子组件名
父组件不能通过数据绑定使用子组件的 start
和 stop
方法,也不能访问子组件的 seconds
属性。
把本地变量(#timer
)放到(<countdown-timer>
)标签中,用来代表子组件。这样父组件的模板就得到了子组件的引用,于是可以在父组件的模板中访问子组件的所有属性和方法。
直接在父组件创建一个timer变量指代子组件,就可以访问所有子组件中的方法???什么鬼啊
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer>
3、用viewChild
4、通过服务,不同组件之间交互