如何避免新的角度组件写在 emca 6

How to avoid new for angular components written im Emca 6?

本文关键字：emca 组件 何避免      更新时间：2023-09-26

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

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());

我必须更改什么？

尝试不要.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>
相关文章：