Question

<my-selector #myRef class="element"></my-selector>

和TS

@ViewChild('myRef') myRef: ElementRef;

访问其父组件中的#myRef，如this.myRef，并未提供DOM，而是提供类及其属性成员。

即使它不是HTML元素我们也可以设计样式但是为什么我们不能将它作为DOM元素而不是组件类？

为什么引用不适用于组件选择器？

Answer 1

如Angular documentation中所述：

模板引用变量通常是对DOM元素的引用在模板中。它也可以是对Angular组件的引用或指令或网络组件。

在以下情况中，模板变量myRef引用组件实例：

<my-selector #myRef class="element"></my-selector>

@ViewChild("myRef") myComponent: MyComponent;

如果您将组件HTML元素作为公共属性提供：

@Component({
    selector: "my-selector",
    ...
})
export class MyComponent {

    constructor(private elementRef: ElementRef) { }

    public get domElement(): HTMLElement {
        return this.elementRef.nativeElement;
    }

    public doSomething() {
        ...
    }
}

您将可以访问该组件以及该组件的其他公共成员：

export class ParentComponent {

    @ViewChild("myRef") myComponent: MyComponent;

    private someMethod() {
        let myComponentId = this.myComponent.domElement.id;
        ...
        this.myComponent.doSomething();
        ...
    }
}

引用不适用于组件选择器？

1 个答案: