Làm thế nào để phát ra một sự kiện từ cha mẹ sang con?

Tôi hiện đang sử dụng Angular 2. Thông thường chúng tôi sử dụng @Output() addTab = new EventEmitter<any>();và sau đó addTab.emit()để phát ra một sự kiện cho thành phần mẹ.

Có cách nào chúng ta có thể làm điều đó, từ cha mẹ đến con cái?

Sử dụng RxJs , bạn có thể khai báo một Subjecttrong thành phần mẹ của mình và chuyển nó như là Observablethành phần con, thành phần con chỉ cần đăng ký thành phần này Observable.

Thành phần chính

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

HTML gốc

<child [events]="eventsSubject.asObservable()"> </child>    

Thành phần con

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Theo như tôi biết, có 2 cách tiêu chuẩn để bạn có thể làm điều đó.

1. @Input

Bất cứ khi nào dữ liệu trong phụ huynh thay đổi, trẻ sẽ được thông báo về điều này trong phương thức ngOnChanges. Đứa trẻ có thể hành động trên đó. Đây là cách tương tác tiêu chuẩn với một đứa trẻ.

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
// can act on the changes here. You will have both the previous value and the 
// current value here.
}

2. Khái niệm dịch vụ chia sẻ

Tạo một dịch vụ và sử dụng một dịch vụ có thể quan sát được trong dịch vụ được chia sẻ. Đứa trẻ đăng ký nó và bất cứ khi nào có thay đổi, đứa trẻ sẽ được thông báo. Đây cũng là một phương pháp phổ biến. Khi bạn muốn gửi một thứ gì đó khác với dữ liệu bạn chuyển làm đầu vào, điều này có thể được sử dụng.

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

Trong một thành phần mẹ, bạn có thể sử dụng @ViewChild () để truy cập vào phương thức / biến của thành phần con.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

Cập nhật:

Angular 8 trở đi -

@ViewChild(NumberComponent, { static: false })

Sử dụng trình trang trí @Input () trong thành phần con của bạn để cho phép cha mẹ liên kết với đầu vào này.

Trong thành phần con, bạn khai báo nó như sau:

@Input() myInputName: myType

Để liên kết một thuộc tính từ cấp độ gốc đến cấp độ con, bạn phải thêm vào mẫu các dấu ngoặc vuông liên kết và tên của đầu vào của bạn giữa chúng.

Thí dụ :

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

Nhưng hãy cẩn thận, các đối tượng được truyền dưới dạng tham chiếu, vì vậy nếu đối tượng được cập nhật trong phần con, var của cha sẽ quá cập nhật. Điều này đôi khi có thể dẫn đến một số hành vi không mong muốn. Với các loại chính, giá trị được sao chép.

Để tiếp tục đọc phần này:

Tài liệu: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Trong phạm vi phụ huynh, bạn có thể giới thiệu trẻ bằng @ViewChild. Khi cần thiết (tức là khi sự kiện sẽ được kích hoạt), bạn chỉ có thể thực thi một phương thức trong phần con từ phương thức chính bằng cách sử dụng tham chiếu @ViewChild.