在Angular2js / Dart中將變量傳遞到html頁面

Question

我有一個飛鏢類以這種方式編寫：

@Component(selector: 'my-content', templateUrl: '../../views/example.html', directives: const [NgFor, NgIf, NgStyle, NgClass], pipes: const [LowerCasePipe, JoinByPipe])

class ContentComponent implements OnInit {
@Input()
 ContentComponent(@Inject(ContentService) this.contentService, @Inject(LoggerService) this.log) {

  }

  @override
  ngOnInit() 
  {
    this.className = '.Ciao';
  }

在example.html中，我這樣做

  <span class="pull-right channel"   [ngClass]="{className}">some content</span>

當我建立這個專案時，我會收到以下訊息：

<span class="pull-right channel"   [ERROR ->][ngClass]="{className}">some content</span>

哪個是正確的語法？

Answer 1

您可以使用以下語法指令：

<span class="pull-right channel" [ngClass]="{Ciao:ciaoClass}">some content</span>

和

ngOnInit() {
  this.ciaoClass = true;
}

如果ciaoClass為true，則添加該類，如果為false，則將其刪除...

您還可以為[ngClass]與您要設置的所有類相對應的數組（或用空格分隔的字符串）。

<span class="pull-right channel" [ngClass]="className">some content</span>

和

ngOnInit() {
  this.className = [ 'Ciao' ];
  // or
  // this.className = 'Ciao';
}

請參閱此文檔：

• https://angular.io/docs/ts/latest/api/common/NgClass-directive.html