angular 动态绑定样式

ゞ 浴缸里的玫瑰 2022-06-01 04:26 297阅读 0赞

demo09.component.ts

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.     selector: 'demo09',
  5.     template: `
  6.         <button [ngClass]="{myHightlight:true}">按钮</button>
  7.         <h1 [ngStyle]="{opacity:myOpacityValue}">透明度是动态绑定过来的</h1>
  8.     `,
  9.     styleUrls:['./test.css']
  10. })
  12. export class Demo09Component implements OnInit {
  13.     myOpacityValue=0.2;
  14.     constructor() { }
  16.     ngOnInit() { }
  17. }

test.style

  1. .myHightlight{
  2.     color: blue;
  3. }

app.component.ts

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'my-app',
  5.   template: `
  6.       <h1>Hello {
  7.    {name}}</h1>
  8.       <demo09></demo09>
  9.   `,
  10. })
  11. export class AppComponent  { name = 'New Year'; }

发表评论

表情：
评论列表 （有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 动态样式绑定

    1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

    迈不过友情╰迈不过友情╰/ 0 赞/ 146 阅读

    相关 Angular--数据绑定

    前言 Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简

    淩亂°似流年淩亂°似流年/ 0 赞/ 481 阅读