4

如何在 Angular 2.x 中创建装饰器指令？我正在编写 Angular 的 alpha 版本，并试图重现 AngularJS (1.x) 指令 ngClass 中的功能。下面是我在 Angular 中尝试自己的 NgClass 的片段。我想做的是观察一些表达式的值，这些表达式可能包含类名哈希到布尔表达式。随着这些表达式的变化，名称将从已应用装饰器的元素的 classList 属性中添加或删除。

这种语法有什么问题？装饰器甚至不是工作的正确模板，也许我应该创建一个模板指令？即便如此，使用 Angular 声明指令的语法是什么？我会接受 ES5 中的答案，但我更喜欢 ES6 和 AtScript。

就上下文而言，我写这篇文章是为了准备一次演讲，我预览了使用 Angular 2 及更高版本编写应用程序的情况。

@Decorator({
  selector: '[ng-class]',
  bind: {'NgClass': 'class'},
  observe: {'ngClass': 'ngClassChanged'}
})
export class NgClass {
  constructor(element:NgElement) {
    this.element = element;
  }

  ngClassChanged(newValue) { 
    let classNames = [];
    if(newValue){
      console.log(newValue);
      this.element.className = newValue;
    }
    else {
        this.element.className = "";
    }

  }
}
4

1 回答 1

1

截至 2015 年 4 月，Angular2 参考文档中的语法说

@Decorator({ selector: '[primary]'}) 
class Primary {                      
   const ructor(field:Field ) { ... }  
}

https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md

于 2015-04-28T21:26:21.150 回答