的 @ViewChild

Question

我的问题是关于从父组件访问childerns组件方法的方法。我找到了使用下面的例子描述的解决方案，但我担心我可能是错误的，而不是＆＃39; angular2 right＆＃39;方式。

例如我们有孩子：

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

父母：

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()方法的解决方案。这有点棘手。问题是：没有使用＆＃39; bindModal＆＃39;是否有最简单，更直接的方法？方法

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访问来自父级的子组件中的方法

1 个答案:

的 @ViewChild