Tôi có một ứng dụng trong đó tôi có thành phần tải lên để tôi có thể tải tệp lên. Nó được nhúng trong body.component.

Khi tải lên, nó nên sử dụng một hàm (ví dụ BodyComponent.thefunction()) của thành phần mẹ (thực hiện lệnh gọi để cập nhật dữ liệu): nhưng chỉ khi thành phần gốc cụ thể là body.component. Tải lên cũng có thể được sử dụng ở những nơi khác với hành vi khác.

Một cái gì đó như parent(this).thefunction(), làm thế nào để làm điều đó?

Tôi sẽ tạo một sự kiện tùy chỉnh trong thành phần con. Đại loại vậy:

@Component({
  selector: 'child-comp',
  (...)
})
export class ChildComponent {
  @Output()
  uploaded = new EventEmitter<string>();

  uploadComplete() {
    this.uploaded.emit('complete');
  }

Thành phần chính của bạn có thể đăng ký vào sự kiện này

@Component({
  template `
    <child-comp (uploaded)="someMethod($event)"></child-comp>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  (...)

  someMethod(event) {
  }
}

Một cách khác sẽ là đưa thành phần cha vào thành phần con nhưng chúng sẽ được liên kết chặt chẽ với nhau ...

Dưới đây là làm việc cho tôi mới nhất

Angular5

class ChildComponent {
  @Output() myEvent = new EventEmitter<string>();

  callParent() {
    this.myEvent.emit('eventDesc');
  }
}

Trong ParentTemplatemẫu của

<child-component (myEvent)="anyParentMehtod($event)"

Giải pháp không có sự kiện liên quan.

Giả sử rằng tôi có một ChildComponentvà từ đó tôi muốn gọi phương thức myMethod()thuộc về ParentComponent(giữ nguyên ngữ cảnh gốc ban đầu).

Lớp thành phần chính:

@Component({ ... })
export class ParentComponent {

    get myMethodFunc() {
        return this.myMethod.bind(this);
    }

    myMethod() {
         ...
    }
}

Mẫu chính:

<app-child [myMethod]="myMethodFunc"></app-child>

Mẫu con

@Component({ ... })
export class ChildComponent {

    @Input() myMethod: Function;

    // here I can use this.myMethod() and it will call ParentComponent's myMethod()
}

Bạn có thể đưa thành phần cha vào thành phần con.

Để biết thêm chi tiết, hãy xem
- Làm cách nào để đưa một thành phần mẹ vào một thành phần con?
- Thành phần con Angular 2 tham chiếu đến thành phần cha Bằng cách này bạn có thể đảm bảo rằng thefunction()chỉ được gọi khi cha là a body.component.

constructor(@Host() bodyComp: BodyComponent) {

Nếu không, việc sử dụng @Output()được ưu tiên để giao tiếp từ trẻ em sang phụ huynh.