Angular 2 - 无法使用ViewChild获取基类实例，也无法获取ContentChild

Question

答案：

• 不要使用exportAs

• 使用@ViewChild（'myContent'）myContent;获取父类的实例

• 只有在初始化视图时它才有效，所以最好使用ngAfterViewInit

这涉及继承！

base class (component)
    |
inherited class (component)

我有一个使用exportAs导出的基类组件

@Component({
    selector: 'my-content',
    exportAs: 'myContent',
    ...
})

继承的类组件使用对基类模板的引用 在自己的模板中

<my-content #myContent>
  ...

在继承组件的代码中，我尝试获取其实例

@ViewChild('myContent') myContent;

或

@ContentChild('myContent') myContent;

有人说这应该有效，但myContent总是未定义

我该如何解决这个问题？

感谢

Answer 1

要在父模板中获取子组件的实例，您可以直接使用Component类，而不需要任何引用，如此

@ViewChild(MyComponentClass) myContent; 

其中MyComponentClass是子组件类的导出名称。

作为旁注，请确保在检查/初始化视图（使用myComponent）而不是ngAfterViewInit之后引用ngOnInit变量，因为在init期间阶段，子组件尚未创建。

这是一名工作人员：

https://plnkr.co/edit/Q53I4EIDOL0ZrUEo2jRN?p=preview

Answer 2

@ViewChild(MyParentComponent) myParent: MyParentComponent

您可以像this.myParent

那样实例化父组件

plunker：

import { Component, ViewChild } from '@angular/core';

@Component({...})

export class InheritedComponent extends BaseClassComponent {  

    @ViewChild(BaseClassComponent) myBaseclass: BaseClassComponent;

    doSomeOperations()
    {
        this.myBaseclass.toggle();
        console.log(this.visible); 
    }

}