要使用Angular的@HostBinding装饰器,你需要掌握以下基础知识:
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
My Component
`
})
export class MyComponent {
@HostBinding('style.color') color = 'red';
}
上面的代码将会把组件的颜色样式(style.color)设置为红色。
完整的解决方案如下所示:
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
My Component
`
})
export class MyComponent {
@HostBinding('style.color') color = 'red';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my-component.component';
@NgModule({
imports: [BrowserModule],
declarations: [MyComponent],
bootstrap: [MyComponent]
})
export class AppModule { }
这样,你就可以在浏览器中看到一个红色的文本“My Component”。