Javascript 如何避免在Emca 6中写入新的角度组件？

我要声明一个非常简单的角度分量，如下所示：

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

。如果我点击

新建

，则不会加载模板。 如果我想将代码更改为（无新代码）

我必须更改什么？

尝试

.component（'searchInput'，new searchInput（））不作为函数调用。因为这样会期望从
constructor（）
a
返回值

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

（（）=>
{
"严格使用",；
课堂背景细节
{
构造函数（）
{
此.template=`
{{$ctrl.name}
大师：
{{$ctrl.master}

{{$ctrl | json}
`;
}
控制器（）
{
var self=这个；
自我主宰=‘耶稣’；
self.name='Salathiel Genèse'；
}
}
角度.module（'app'，[]）
.component（'backgroundDetail'，new backgroundDetail（））；
})();

HTML


{{app.title}}
试试
.component（'searchInput'，newsearchInput（））不作为函数调用。因为这样会期望从
constructor（）
a
返回值

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

（（）=>
{
"严格使用",；
课堂背景细节
{
构造函数（）
{
此.template=`
{{$ctrl.name}
大师：
{{$ctrl.master}

{{$ctrl | json}
`;
}
控制器（）
{
var self=这个；
自我主宰=‘耶稣’；
self.name='Salathiel Genèse'；
}
}
角度.module（'app'，[]）
.component（'backgroundDetail'，new backgroundDetail（））；
})();

HTML


{{app.title}}
trusted Reflect.construct（'SearchInput'，''）？我应该把它放在哪里，它应该做什么？.component（'SearchInput'，Reflect.construct（'SearchInput'，''）；假设try
组件
需要一个对象。我不知道你为什么要首先声明一个“类”。它是为
controller
和
service
而做的，因为它们需要一个构造函数，就像在很多其他示例中一样
component
需要一个对象，而不是构造函数。尝试了反射.construct（'SearchInput'，''）？我应该把它放在哪里，它应该做什么？component（'SearchInput'，Reflect.construct（'SearchInput'，''）；假设try
组件
需要一个对象。我不知道你为什么要首先声明一个“类”。它是为
controller
和
service
而做的，因为它们需要一个构造函数，就像在很多其他示例中一样
component
需要一个对象，而不是构造函数。同样的结果是，模板没有被加载。我还没有读过angular component的相关内容，但示例将带有相关属性的
object
作为第二个参数
{templateUrl，controller}
，但我认为
{template，controller}
应该也能工作。因此，让我编辑我的postStil相同的结果。我一发布新的
（以及
（）
）就什么也没有显示。：）我希望你没有复制我的
构造函数而不是
构造函数：注意
s
。我刚刚在跟踪过程中发现了该漏洞，如果它仍然不工作，请检查
import
是否按预期工作。我使用的是简单的javascript，不是
TypeScript
，或者像这样的结果，模板没有加载。我还没有读过angular Component的内容，但是示例将带有相关属性
{templateUrl，controller}
的
对象作为第二个参数，但我认为
{template，controller}
应该也可以工作。因此，让我编辑我的postStil相同的结果。我一发布新的
（以及
（）
）就什么也没有显示。：）我希望你没有复制我的
构造函数而不是
构造函数：注意
s
。我刚刚在跟踪过程中发现了该漏洞，如果它仍然不工作，请检查
import
是否按预期工作。我使用的是简单的javascript，不是
TypeScript
之类的