1. parent to child:
parent:
<app-child [childMessage]="parentMessage"></app-child>
child:
@Input() childMessage: string;
2. child to parent:
@ViewChild : 使父组件可以获取到子组件的属性和功能;但是,子组件直到视图初始化完成后才可用,这就意味着我们需要在AfterViewInit 生命钩子中获取来自子组件的数据;
3. child to parent:
@Output() and EventEmitter
另一种在父子组件共享数据的方式是,从子组件发送数据,由父组件进行监听。这种方法适用的场景,主要发生在像button 点击或其他的用户事件, 需要共享数据的变化这种情况下;
parent:
创建一个方法去接收来自子组件的数据,无论什么时候事件发生,都会触发这个接收数据的方法;
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}
child:
用@Output()装饰器来声明一个变量,类型为 event emiter; 创建一个方法,发送带有message 数据(或我们想要发送的数据)的event,调用emit() 方法;然后创建个button 去触发这个创建的方法;
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}
4. shared service from different component
假如传递数据的组件没有直接的关系,我们可以用到 RxJS BehaviorSubject 。
- It will always return the current value on subscription - there is no need to call
onnext
- It has a
getValue()
function to extract the last value as raw data. - It ensures that the component always receives the most recent data.
例如: 创建一个公用的service,在service里创建一个BehaviorSubject,在需要获取此值的组件中订阅它,如果有新的值出现,则它就会自动广播(broadcast)到其他订阅的组件中。
剪藏链接: