Question

我尝试使用vanilla es5构建自定义指令/ Angular 2.

这是代码

(function(app) {

app.CustomDirective = ng.core.
    Directive({
        selector: 'test',
    })
    .Class({
        constructor: function CustomDirective() {
            console.log('ds')
        },
        ngOnInit: function() {

        }
    });

})(window.app || (window.app = {}));

我将其声明为ngmodule

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule, ng.http.HttpModule ],
      declarations: [ app.AppComponent, app.CustomDirective],
      providers: [app.MyService ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

AppComponent中的

(function(app) {

    app.AppComponent = ng.core.
    Component({
      selector: 'my-app',
      templateUrl: '//app/app.component.html',
      directives: [app. CustomDirective ]
    })
    .Class({
      constructor: [app.MyService, function AppComponent(myService) {
          this.myService = myService;
      }],

      ngOnInit: function() {
      }
    });

})(window.app || (window.app = {}));

并在html中

<h2 test >Test</h2>

但是我在指令的构造函数中的控制台日志永远不会被触发。

如果我声明它而不是声明数组，那么它会被调用，这是奇怪的，因为它是一个指令，因此我不能访问元素的elementRef我应用指令

我在package.json中使用最新的angular 2版本quickstart guide

更新

我需要更新此行

Directive({
    selector: 'test',
})

到这个

Directive({
    selector: '[test]',
})

带有es5的Angular 2自定义指令

0 个答案: