Angular2 从 parent 访问 child 组件中的方法

Question

我的问题是关于从 parent 组件访问 childerns 组件方法的方式。我找到了使用下面示例描述的解决方案，但我担心可能是我做错了，而不是 'angular2 right' 方式。

例如我们有 child:

@Component({ ... })
export class Modal {
    ...
    open() {
        ...
    }
}

和parent：

import { Modal } from '../common';
...
@Component({
  selector: 'editor',
  directives: [ Modal ],
  templateUrl: './editor.html',
  ...
})
export class Editor {

    _modal = null;

    ...

    bindModal(modal) { this._modal=modal; }

    open() {
        this._modal.open();
    }
}

并且在 editor.html 中：

<button (click)="open()">Open Editor</button>

<modal #editModal>{{ bindModal(editModal) }}
    Here is my editor body in modal (popup) window
    ...
</modal>

这是从 Editor 组件访问 Modal 组件内的 open() 方法的解决方案。这有点棘手。问题是：有没有不用'bindModal'方法的最简单直接的方法？

Answer 1

有很多方法可以做到，

@ViewChild

import  {ViewChild} from '@angular/core';
import { Modal } from '../common';
...
@Component({
  selector: 'editor',
  directives: [ Modal ],
  templateUrl: './editor.html',
  ...
})
export class Editor {
 @ViewChild(Modal) md:Modal;

 Open()
 {
    this.md.open();
 }

}

其他方法是使用 #localVariable 并且您可以从父级本身访问子方法。

Angular2 从 parent 访问 child 组件中的方法

Angular2 access to the methods in child component from parent

methods

components

children

parent

angular

@ViewChild