如何避免使用 Ecma 6 编写的新角度组件？答案

【问题标题】：How to avoid new for angular components written im Emca 6?如何避免使用 Ecma 6 编写的新角度组件？
【发布时间】：2016-04-26 11:23:43
【问题描述】：

我正在声明一个非常简单的角度组件，如下所示：

import htmlTemplate from './searchInput.html'

export default class SearchInput {

    constructor() {
        this.template = htmlTemplate;
    }

}

然后我像这样使用它：

import SearchInput from './components/searchInput/searchInput';

angular.module('prj', [])
    .component('searchInput', new SearchInput());

效果很好。

但是到目前为止，我发现的所有带有 angular 1.x 和 ECMA 6 的示例都没有在 SearchInput 类上调用 new。如果我省略new，则不会加载模板。如果我希望能够将我的代码更改为（没有新的），

angular.module('prj', [])
    .component('searchInput', SearchInput());

我需要改变什么？

【问题讨论】：

试过 Reflect.construct('SearchInput', '') ?
我应该把它放在哪里，它应该做什么？
.component('searchInput', Reflect.construct('SearchInput', ''));试试看
.component 需要一个对象。我不知道你为什么要首先声明一个“类”。
这是为controller 和service 完成的，因为它们需要一个构造函数，以及在许多其他示例中。 component 需要一个对象，而不是构造函数。

标签： javascript angularjs ecmascript-6

【解决方案1】：

尝试.component('searchInput', new SearchInput()); 不作为函数调用。由于这种方式将期望从contructor() 到return value

class SearchInput()
{
    constructor()
    {
        this.template = ... // whatever value you see fit
    }
    controller()
    {
        ... // implements your logic
    }
}

新的只是控制器方法

请看我用于测试的这个例子：

JAVASCRIPT

(() =>
{
    'use strict';
    class BackgroundDetail
    {
        constructor()
        {
            this.template = `<fieldset>
                                <label>{{$ctrl.name}}</label>
                                <span>
                                    Master:
                                    <em>
                                        {{$ctrl.master}}
                                    </em>
                                </span>
                                <hr/>
                                <input ng-model="$ctrl.master">
                                <pre>{{$ctrl|json}}</pre>
                            </fieldset>`;
        }
        controller()
        {
            var self = this;
            self.master = 'Jesus';
            self.name = 'Salathiel Genèse';
        }
    }



    angular.module('app', [])
    .component('backgroundDetail', new BackgroundDetail());
})();

HTML

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng-app="app" ng-cloak ng-strict-di>
    <head>
        <meta charset="utf-8">
        <title>{{app.title}}</title>
        <!-- AngularJs requirements  -->
        <script src="web/libs/jquery/dist/jquery.js"></script>
        <script src="web/libs/angular/angular.js"></script>
        <!-- app requirements -->
        <script src="web/js/javascript.js"></script>
    </head>
    <body>
        <background-detail></background-detail>
    </body>
</html>

【讨论】：

同样的结果，模板没有加载。
我还没有阅读有关角度分量的信息，但示例here shown 将Object 与相关属性{templateUrl, controller} 作为第二个参数，但我认为{template, controller} 应该工作相同。因此，让我编辑我的帖子
还是一样的结果。一旦我省略了 new （和 () ）什么都没有显示。
:) 希望你没有抄袭我的contructor 而不是constructor：注意s。我刚刚在追踪过程中发现了这个缺陷
如果仍然无法正常工作，请检查 import 是否按预期工作。我使用的是简单的 javascript，而不是 TypeScript 或类似