我不知道如何添加到我的组件<component></component>一个动态类属性,但在模板html (component.html)。
我找到的唯一解决方案是通过“ElementRef”原生元素修改项目。这个解决方案似乎有点复杂,做一些应该很简单的事情。
另一个问题是CSS必须在组件作用域之外定义,这破坏了组件封装。
有没有更简单的解决办法?比如<root [class]="…"" >…模板中的</ root>。
我不知道如何添加到我的组件<component></component>一个动态类属性,但在模板html (component.html)。
我找到的唯一解决方案是通过“ElementRef”原生元素修改项目。这个解决方案似乎有点复杂,做一些应该很简单的事情。
另一个问题是CSS必须在组件作用域之外定义,这破坏了组件封装。
有没有更简单的解决办法?比如<root [class]="…"" >…模板中的</ root>。
当前回答
你可以简单地添加@HostBinding('class') class = 'someClass';在@Component类中。
例子:
@Component({
selector: 'body',
template: 'app-element'
})
export class App implements OnInit {
@HostBinding('class') class = 'someClass';
constructor() {}
ngOnInit() {}
}
其他回答
下面是我的做法(Angular 7):
在组件中,添加一个输入:
@Input() componentClass: string = '';
然后在组件的HTML模板中添加如下内容:
<div [ngClass]="componentClass">...</div>
最后在你实例化组件的HTML模板中:
<root componentClass="someclass someotherclass">...</root>
免责声明:我是Angular的新手,所以我可能只是运气好而已!
这样你就不需要在组件外添加CSS了:
@Component({
selector: 'body',
template: 'app-element',
// prefer decorators (see below)
// host: {'[class.someClass]':'someField'}
})
export class App implements OnInit {
constructor(private cdRef:ChangeDetectorRef) {}
someField: boolean = false;
// alternatively also the host parameter in the @Component()` decorator can be used
@HostBinding('class.someClass') someField: boolean = false;
ngOnInit() {
this.someField = true; // set class `someClass` on `<body>`
//this.cdRef.detectChanges();
}
}
砰砰作响的例子
这个CSS是在组件内部定义的,只有当类someClass在宿主元素上设置时(从外部),选择器才会应用:
:host(.someClass) {
background-color: red;
}
除了@ joshudavid的答案,还有另一种方法来定义静态类,我尝试过在angular v8上也可以(可能也适用于旧版本):
@Component({
selector: "my-component.someClass1.someClass2",
...
})
它将生成以下输出:
<my-component class="someClass1 someClass2">
...
</my-component>
你也可以这样用:
@Component({
selector: ".someClass1.someClass2",
...
})
它将生成以下输出:
<div class="someClass1 someClass2">
...
</div>
如果你想给你的host元素添加一个动态类,你可以把你的HostBinding和getter结合起来
@HostBinding('class') get class() {
return aComponentVariable
}
Stackblitz演示在https://stackblitz.com/edit/angular-dynamic-hostbinding
另一个问题是CSS必须在组件作用域之外定义,这破坏了组件封装
这是不对的。使用scss (SASS),您可以轻松地样式组件(本身;主机)如下:
:host {
display: block;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
&.someClass {
visibility: visible;
}
}
这样封装是“完整的”。