angular 动态绑定样式
程序员文章站
2022-05-15 18:41:29
...
demo09.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'demo09',
template: `
<button [ngClass]="{myHightlight:true}">按钮</button>
<h1 [ngStyle]="{opacity:myOpacityValue}">透明度是动态绑定过来的</h1>
`,
styleUrls:['./test.css']
})
export class Demo09Component implements OnInit {
myOpacityValue=0.2;
constructor() { }
ngOnInit() { }
}
test.style
.myHightlight{
color: blue;
}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<demo09></demo09>
`,
})
export class AppComponent { name = 'New Year'; }
上一篇: angular样式绑定
下一篇: 网页的四种解析方式
推荐阅读