angularElementClass用于angular2中的多个类

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;
    }
}

UPDATE2

@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'];
    }
}