我正在试验.component()语法在Angular 1.5。
看来最新的方式是在组件中在线编写控制器,而不是在一个单独的文件中,我可以看到,组件样板是最小的优点。
问题是,我已经编写我的控制器作为typescript类,并希望继续这样做,因为这似乎与Angular2一致。
我最大的努力是这样:
export let myComponent = { template: ($element,$attrs) => { return [ `<my-html>Bla</my-html>` ].join('') },controller: MyController }; class MyController { }
它工作,但它不优雅。有没有更好的办法?
我使用一个简单的Typescript装饰器来创建组件
原文链接:https://www.f2er.com/angularjs/145451.htmlfunction Component(moduleOrName: string | ng.IModule,selector: string,options: { controllerAs?: string,template?: string,templateUrl?: string }) { return (controller: Function) => { var module = typeof moduleOrName === "string" ? angular.module(moduleOrName) : moduleOrName; module.component(selector,angular.extend(options,{ controller: controller })); } }
所以我可以使用它像这样
@Component(app,'testComponent',{ controllerAs: 'ct',template: ` <pre>{{ct}}</pre> <div> <input type="text" ng-model="ct.count"> <button type="button" ng-click="ct.decrement();">-</button> <button type="button" ng-click="ct.increment();">+</button> </div> ` }) class CounterTest { count = 0; increment() { this.count++; } decrement() { this.count--; } }
你可以试试一个工作jsbin here http://jsbin.com/jipacoxeki/edit?html,output