Angular 1.5 组件 - 从指令转换后未呈现模板

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> => 被模板标记替换

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

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

没有错误，唯一改变的是我现在将它作为组件而不是指令链接到模块。我浏览了我的代码，我相信它应该与组件 API 完全兼容。我有什么明显的遗漏吗？我几乎在 Google 上搜索过我能找到的所有类似问题，但我不确定我哪里出错了。

Answer 1

很抱歉让这个问题复活，但我刚刚在我的项目中提出了这个确切的问题，并且没有上课就解决了。

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

我刚刚做了一个组件转换的指令（没有类，只有常规的 javascript），它已经修复了。

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

Answer 2

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

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

如果有人能解释为什么需要这样做，则可以加分。