Question

我想使用我创建的组件如下：

<vx-alert class="au-upper-center">
    <p>Upper Center</p>
</vx-alert>

在vx-alert组件中，我想拉出HTML中应用的类列表，这些类导致组件被实例化。最后，我想在vx-alert组件中添加其他类。我可以非常轻松地替换vx-alert组件类（如下所示）：

@Component({
    moduleId: module.id,
    selector: 'vx-alert',
    templateUrl: 'alert.html'
})
export class AlertComponent extends I18N implements OnInit {
    @HostBinding('class') private classList:string;

    ngOnInit() {
        this.classList = 'au-ease-in-out au-20000ms';
   }
}

但是当this.classList被指定为新值时，HTML代码中设置的原始类将被覆盖...所以我如何检索HTML提供的类，以便我可以以编程方式将这些类连接到我的确定的课程？

我的Plunker已更新为使用@acdcjunior提供的答案：

http://embed.plnkr.co/AKYU9ANRm5ogzhlzY9G0/

Answer 1

您可以将class的{{1}}属性视为对其的输入（vx-alert）。这样，你就可以读出它的价值。

之后，您可以使用@Input('class')进行修改：

@HostBinding('class')

请参阅demo plunker here。

如何在Angular 2组件上获取通过HTML应用的类？

1 个答案: