typescript - angular2中多个类的setElementClass

Question

我在 angular2 中单击一个图标后尝试添加多个类

这是我的代码:

import {Component, ElementRef, Renderer} from 'angular2/core';
import {CourseService} from './courses.service';
import {AutoGrowDirective} from './auto-grow.directive';

@Component({
    selector: 'courses',
    template: `<i (click)="onclick($event)" class="glyphicon glyphicon-star"></i>
                <h3>Courses</h3>
                {{title}}
                <input type="text" autoGrow/>
                <ul>
                    <li *ngFor="#course of courses">
                        {{course}}
                    </li>
                </ul>`,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title:string = "List of course";
    courses;

    constructor(courseService:CourseService, private el:ElementRef, private renderer:Renderer) {
        this.courses = courseService.getCourses();
    }

    onclick($event) {
        this.renderer.setElementClass(this.el.nativeElement, 'glyphicon glyphicon-star-empty', true);
    }
}

但是当我点击图标时，我的浏览器控制台抛出这个错误:

EXCEPTION: Error during evaluation of "click"

我想这是因为类之间的空格，我自己想不通的是如何在一个元素中添加多个类？

Answer 1

只需为每个类单独调用 this.renderer.setElementClass(...) 并将 isAdd 参数设置为 true

this.renderer.setElementClass(this.el.nativeElement, 'glyphicon', isAdd: true);
this.renderer.setElementClass(this.el.nativeElement, 'glyphicon-star-empty', isAdd: true);

(未测试)

更新

@Component({
    selector: 'courses',
    template: `<i (click)="onclick($event)" class="glyphicon glyphicon-star"></i>
                <h3>Courses</h3>
                {{title}}
                <input type="text" autoGrow/>
                <ul>
                    <li *ngFor="#course of courses">
                        {{course}}
                    </li>
                </ul>`,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title:string = "List of course";
    courses;

    constructor(courseService:CourseService) {
        this.courses = courseService.getCourses();
    }


    @HostBinding('class.glyphicon') 
    @HostBinding('class.glyphicon-star-empty') 
    _isGlyphIcon:boolean = false;

    onclick($event) {
        this._isGlyphIcon = true;
    }
}

更新2

@Component({
    selector: 'courses',
    template: `<i (click)="onclick($event)" [ngClass]="_iconClasses"></i>
                <h3>Courses</h3>
                {{title}}
                <input type="text" autoGrow/>
                <ul>
                    <li *ngFor="#course of courses">
                        {{course}}
                    </li>
                </ul>`,
    providers: [CourseService],
    directives: [AutoGrowDirective]
})
export class CoursesComponent {
    title:string = "List of course";
    courses;

    constructor(courseService:CourseService) {
        this.courses = courseService.getCourses();
    }

    _iconClasses:string[] = ['glyphicon', 'glyphicon-star'];

    onclick($event) {
      this._iconClasses = ['glyphicon', 'glyphicon-star-empty'];
    }
}