Question

我有一个正在运行的Angular指令（myUser）。它是在AngularJS 1.5项目中定义的，使用类似这样的TypeScript（我直接在指令中指定控制器）。指令（myUser）链接到它的父模块（你可以在下面的代码示例的底部看到这个 - 你需要滚动）

class myUser {

    controller: any;
    templateUrl: string;
    controllerAs: string;

    constructor() {
        this.controller = myCtrl;
        this.controllerAs = 'ctrl';
        this.templateUrl    = '/mytemplate.html';
    }
    static userFactory() {
        var instance = new myUser();
        return instance;
    }
}


class myCtrl {

    global: any;
    mySrv: any;
    username: any;
    focus: boolean;

    static $inject = ['MyDependency', 'MyService'];

    constructor(UserInfo, mySrv) {
        this.global     = UserInfo;
        this.mySrv    = mySrv;
        this.myData   = this.global ? this.global.myData : false;
        this.focus      = false;
    }

    check() {
        if(this.myData){
            return true;
        };
        return false;
    }

    signIn(model) {
        this.mySrv.signIn(model);
    }

    signOut() {
        this.mySrv.signOut();
    }
}

class myOtherDir {
     ... other directive definition
}

class myOtherCtrl {
     ... other controller definition
}

angular
    .module('shared.myNavigation', [])
    .directive('myUser', myUser.userFactory)
    .directive('myOtherDir', myOtherDir.dirFactory)
    .controller('myOtherCtrl', myOtherCtrl)

当我运行应用程序时，指令被/mytemplate.html：

的内容替换

HTML ... <my-user></my-user> =＆gt;被模板标记替换

当我将指令更改为组件时，使用像这样的Angular 1.5组件API，我的HTML中的组件声明不再被模板标记替换：

angular
    .module('shared.myNavigation', [])
    .component('myUser', myUser.userFactory)
    .directive('myOtherDir', myOtherDir.dirFactory)

没有错误，唯一改变的是我现在将它作为组件而不是指令链接到模块。我已经完成了我的代码，我相信它应该与组件API完全兼容。有什么明显的东西我不见了吗？我用谷歌搜索了我能找到的每一个类似问题，而且我不确定我哪里出错了。

Answer 1

我不完全确定原因，但是我不需要调用静态userFactory函数来创建类实例，而是需要在连接组件时直接创建实例，如下所示：

angular
    .module('shared.myNavigation', [])
    .component('myUser', new myUser())

如果有人能解释为什么需要这样做，那么可以获得奖励积分。

Answer 2

很抱歉让我复活了，但是我只是在项目中提出了这个确切的问题，没有类就解决了。

似乎组件注册函数采用函数 expression ，而不是指令注册中的函数 reference 。因此，在提供问题的源代码中，只需在注册中添加括号即可执行并注册该组件。

我只是对组件转换做了一个指令（没有类只是常规的javascript），并且它是固定的。

angular
.module('shared.myNavigation', [])
.component('myUser', myUser.userFactory()) /*Converting to expression*/
.directive('myOtherDir', myOtherDir.dirFactory)

Angular 1.5组件 - 从指令

2 个答案: