从父级的子级访问元素标记名

Question

我有两个组件，ParentComponent和ChildComponent：

parent.component.html

<child-selector #parent></child-selector>

parent.component.ts

@ViewChild('parent', { read: ElementRef }) parent: ElementRef<any>;


doThis(event) {
    this.parent.nativeElement.childNodes.forEach(e => {
        if (e.tagName === 'GRIDSTER-ITEM') {
          console.log("do stuff here");
        }
      });
}

child.component.html

<gridster>
    <grister-item></gridster-item>
<gridster>

child.component.ts

如果代码是相同的组件，则代码将起作用，子html将直接位于父级中，而#parent将位于元素<gridster>上。

我应该使用什么代替ElementRef？ 也许是另一种解决方案？

Answer 1

您可以将gridster-item元素提供给子组件。

child.component.ts

@ViewChildren(GridsterItemComponent) gridsterItems;

parent.component.ts

@ViewChild(ChildComponent) childComponent;

doSomething() {
  this.childComponent.gridsterItems.callSomeMethod();
}