是否可以使用组件主机属性来设置局部变量？

Question

我有一个像这样的简单组件

ViewChild

只有我使用a容器的原因是因为我需要一个局部变量，然后我使用:host在我的组件中引用它。我知道如何在样式表中使用host设置主机组件的样式。可以使用我的组件上的host: { '#slick': '' } 属性来完成类似的操作吗？

做

InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '#slick' is not a valid attribute name.

产量

#movieplayer

修改

我的意思是局部变量是它在中的使用方式 - 他们使用export class CarouselComponent { @ViewChild('slick') slickElem @Input() components ngAfterViewInit() { $(this.slickElem.nativeElement).slick({ dots: true, arrows: true, draggable: false }) } } 。

这是我的组件

<div #slick>
    <div *ngFor="let component of components">
        <item-wrapper [item]="component"></item-wrapper>
    </div>
</div>

及其HTML

<div #slick>

我想知道的是，我是否可以移除#slick容器，并且a）将{{1}}附加到我的主机元素或b）使用其他方法获取主机元素。

Answer 1

你可以做到

constructor(private elementRef:ElementRef) {} 

获取对CarouselComponent主机元素的引用（如果这是您想要的）。