setElementClass用于angular2中的多个类

问题描述

在我单击angular2中的图标后，我试图添加多个班级

I am trying to add multiple class after I click an icon in 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);
    }
}

但是，当我单击图标时，我的浏览器控制台会引发此错误:

But when I click on the icon my browser console throws this error:

EXCEPTION: Error during evaluation of "click"

我认为这是因为类之间有一个空格，我无法弄清楚自己是如何在一个元素中添加多个类的?

I figured it's because a space between classes, what I couldn't figure myself is how do I add multiple classes in an element?

推荐答案

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

Just call this.renderer.setElementClass(...) for each class individually and set the isAdd parameter to 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'];
    }
}

这篇关于setElementClass用于angular2中的多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！