网站首页 » 前端开发 » Angular 2+ » Angular 4.x NgStyle 指令用法
上一篇:
下一篇:

Angular 4.x NgStyle 指令用法

基本用法

官方给出的用法就只有两种不同的形式,行内添加及或者通过一个对象添加。下面就是 NgStyle 的全部内容。

语法
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [ngStyle]="objExp">...</some-element>

示例

套路一

行间添加样式,可添加一个或多个。

app.component.html (v1)
<div>
  <h1>{{title}}</h1>
  <div [ngStyle]="{'font-size.px': 58,'color':'#373d41','font-weight': 'bolder'}">云库前端</div>
</div>

套路二

下面这种方法跟第一种方法是差不多的,只是把样式放到了一个对象中而已。不信你看看:

app.component.ts (v2)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 4.x NgClass';
  styleFlag = false;
  styleObject: Object = {}

  // 动态控制样式
  changeStyle(): void {
    this.styleFlag = !this.styleFlag;
    if (this.styleFlag) {
      this.styleObject = {
        "font-size": "58px",
        "color": "#373d41",
        "font-weight": "bolder"
      }
    } else {
      this.styleObject = {}
    }
  }
}

因为本例子中没有用到 app.component.css 中的样式,所以这个可以不引入,但在示例代码中还是保留了样式文件的引入。

app.component.html (v2)
<div>
  <h1>{{title}}</h1>
  <div [ngStyle]="styleObject">云库前端</div>
  <button (click)="changeStyle()">切换</button>
</div>

送温暖

在Angular 1.x 中ng-style 的用法跟 angular 4.x 就有些不一样了。

Angular 1.x NgStyle
<div ng-style="{color:'#373d41','font-size':'58px'}">云库网</div>
<div ng-style="{'fontSize':'58px'}">云库网</div>
<div ng-style="{'fontSize':true?'58px':'28px'}">云库网</div> 

第三种方法可以通过一个布尔值来决定将输出的值。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-api-ngstyle/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END