传递变量在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