访问放置属性 angular 组件的 div

Question

我有一个这样定义的 angular 组件

 <div [app-collapsible-column] class="col-sm-3 relatives-left-list" [direction]="'left'">

我想要实现的是从 app-collapsible-column 组件代码中修改 class。我知道我可以通过 ViewChild 获取模板的引用。但是，如何获取组件本身定义的 div 的引用？

Answer 1

我们可以在 app-collapsible-column 组件中公开 ElementRef

 constructor(public ele:ElementRef){
 }

然后在父组件中我们可以使用 ViewChild 访问 div 元素，像这样

@ViewChild(CollapsibleColumn) componentRef:CollapsibleColumn;
   
ngAfterViewInit(){
  console.log(this.componentRef.ele);
}

Get access to div where attribute angular component is placed