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

我不太清楚为什么，但是我没有调用静态 userFactory 函数来创建一个 class 实例，我需要在连接组件时直接创建实例，如下所示：

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 组件 - 从指令转换后未呈现模板

Angular 1.5 component - template not rendered after converting from directive

javascript

angularjs

angular-directive

angularjs-1.5