Question

我不确定如何将ngStyle指令与最新的beta-12一起使用。请有人澄清一下。

Angular docs https://angular.io/docs/js/latest/api/common/NgStyle-directive.html中的plnkr链接已过时，它使用alpha版本。

我尝试了这些语法，但似乎没有用。我

 [ngStyle]="{'display': none}"
 [style.display]="none"

http://plnkr.co/edit/U9EJuIhFqxY9t2sULMdw

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngStyle]="{'display': none}">Hello {{name}}</h2>
      <h2 [style.display]="none">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

Answer 1

在这两种情况下，none应为'none'并带引号。因为您应该为属性string分配display值。 none（没有qoutes）将在运行时进行评估并返回undefined，这不是css属性的可接受值display

//our root app component
import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 [ngStyle]="{'display': 'none'}">Hello {{name}}</h2>
      <h2 [style.display]="'none'">Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

Here is your plunker fixed

<强>更新

这来自NgClass directive的angular2 docs：

表达式评估的结果有不同的解释   取决于表达式评估结果的类型：

string - 字符串（空格分隔）中列出的所有CSS类都是   加入
  数组 - 添加了所有CSS类（数组元素）   对象 -   每个键对应一个CSS类名称，同时解释值   作为评估布尔值的表达式。如果给定的表达式计算   为true，添加了相应的CSS类 - 否则将被删除。

@Component({
  selector: 'my-app',
  providers: [],
  styles:['.hide{display:none}',
  '.border{border:3px solid blue}',
  '.redBack{background-color:red}'
  ],
  template: `
    <div>
      <h2 [ngStyle]="{'display': 'none'}">Hello {{name}}</h2>
      <h2 [style.display]="'none'">Hello {{name}}</h2>
      <h2 [ngClass]="'redBack'">Hello {{name}}</h2>  // just normal string
      <h2 [ngClass]="{'hide':hideFlag}">Hello {{name}}</h2>  // will add class 'hide' if hideFlag is true
      <h2 [ngClass]="mulClasses">Hello {{name}}</h2>  // will add an array of classes ['border','redBack']
    </div>
  `,
  directives: []
})
export class App {
  hideFlag = false;
  mulClasses = ['border','redBack']

  constructor() {
    this.name = 'Angular2'
  }
}

here is the example in plunker

Angular 2中的ngStyle和ngClass

1 个答案: