傳遞變量在Angular2js /鏢到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爲真，類被添加，如果它是假的，它會被刪除...

您還可以提供一個數組（或用空格分隔的字符串）至[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