Question

angular2的新手，很抱歉，如果这是一个愚蠢而简单的问题。

在angular1中，我可以创建一个这样的简单指令，如果模型的属性为真，它将向元素添加一个css类。

angular.module('app').directive('myDirective', function () {
    'use strict';

    return {
        restrict: 'E',
        templateUrl: '<div>Hello</div>',
        scope: {},
        bindToController: {
            myModel: '='
        },
        controller: function() {

        },
        controllerAs: 'ctrl',
        link: function(scope, element, attrs, ctrl) {
            if (myModel.addClass)
                element.addClass('col-xs-2');
        }
    };

});

我怎么能在angular2中这样做？这是angular2的组件代码，但我无法找到如何将类添加到根元素标记。

imports { Input } from '@angular/core';

@Component({
    selector: 'my-directive',
    template: `
        <div>Hello</div>
    `,
})

export class MyDirectiveComponent {
    @Input()
    myModel: Object;
}

Answer 1

我认为您正在寻找ngClass绑定...

<div [ngClass]="{'col-xs-2': myModel.addClass}">

Answer 2

简单方法（但不推荐）将是

<div [style]="myStyle"></div>

并在您的组件中

export class MyDirectiveComponent {
    @Input()
    myModel: Object;

   changeModel(col : number){
    this.myModel = 'col-xs-'+col; // Gives you col-xs-1 or 2 ....based on input
   }
}

如何动态设置angular2组件标签的样式？

2 个答案: