Con lắng nghe sự kiện cha trong Angular 2

Trong tài liệu góc có chủ đề về việc lắng nghe các sự kiện trẻ em từ cha mẹ. Tốt rồi. Nhưng mục đích của tôi là một cái gì đó ngược lại !. Trong ứng dụng của tôi có 'admin.component' giữ chế độ xem bố cục của trang quản trị (menu thanh bên, thanh tác vụ, trạng thái, v.v.). Trong thành phần chính này, tôi đã định cấu hình hệ thống bộ định tuyến để thay đổi chế độ xem chính giữa các trang khác của quản trị viên. Vấn đề là để lưu những thứ sau khi thay đổi, người dùng nhấp vào nút lưu trong thanh tác vụ (được đặt trong admin.component) và thành phần con phải lắng nghe sự kiện nhấp chuột đó để thực hiện lưu nhân viên.

Tôi nghĩ rằng tài liệu này có thể hữu ích cho bạn:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

Trên thực tế, bạn có thể tận dụng một chủ đề / quan sát được mà cha mẹ cung cấp cho con cái. Đại loại như vậy:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

Thành phần con có thể chỉ cần đăng ký chủ đề này:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // called when the notifyChildren method is
      // called in the parent component
    });
  }

  ngOnDestroy() {
    // needed if child gets re-created (eg on some model changes)
    // note that subsequent subscriptions on the same subject will fail
    // so the parent has to re-create parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

Nếu không, bạn có thể tận dụng dịch vụ được chia sẻ có chứa chủ đề như vậy theo cách tương tự ...

Vì lợi ích của hậu thế, tôi chỉ nghĩ rằng tôi sẽ đề cập đến giải pháp thông thường hơn cho việc này : Đơn giản chỉ cần lấy một tham chiếu đến ViewChild sau đó gọi trực tiếp một trong các phương thức của nó.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Fired');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Có thể có một cách tiếp cận xương trần hơn ở đây nếu tôi hiểu đúng câu hỏi. Giả định -

• OP có một nút lưu trong thành phần mẹ
• Dữ liệu cần được lưu trong các thành phần con
• Tất cả dữ liệu khác mà thành phần con có thể cần có thể được truy cập từ các dịch vụ

Trong thành phần mẹ

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

Và ở đứa trẻ ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

Điều này chỉ đơn giản là gửi nút bấm đến thành phần con. Từ đó thành phần con có thể lưu dữ liệu một cách độc lập.

CHỈNH SỬA: nếu dữ liệu từ mẫu mẹ cũng cần được chuyển cùng với việc nhấp vào nút, điều đó cũng có thể thực hiện được với cách tiếp cận này. Hãy cho tôi biết nếu trường hợp đó xảy ra và tôi sẽ cập nhật các mẫu mã.

Đối với những người đang nhận được Cannot read property 'notifyMe' of undefined

Hãy thử gọi phương thức bên trong ngAfterViewInit()intead ofngOnInit()