Компонент Angular 1.5 - шаблон не отображается после преобразования из директивы

У меня есть директива 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> => заменяется разметкой шаблона

Однако, когда я изменяю директиву на компонент, используя API компонента Angular 1.5, подобное этому, объявление компонента в моем HTML больше не заменяется разметкой шаблона:

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

Ошибок нет, и единственное, что изменилось, это то, что теперь я связываю это с модулем как с компонентом, а не с директивой. Я просмотрел свой код и считаю, что он должен быть полностью совместим с API компонента. Есть ли что-то очевидное, что я упускаю? Я гуглил почти каждую похожую проблему, которую я мог найти, и я не уверен, где я ошибаюсь.


person Chris Halcrow    schedule 31.01.2018    source источник


Ответы (2)


Извините за воскрешение этого, но я только что придумал именно эту проблему в своем проекте и решил без классов.

Похоже, что функции регистрации компонента принимают функцию выражение, а не функцию ссылка, как в директиве Registration. Таким образом, в источнике, указанном в вопросе, простое добавление круглых скобок к регистрации приведет к выполнению и регистрации компонента.

Я только что сделал директиву для преобразования компонентов (без классов, только обычный javascript), и это было исправлено.

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

Я не совсем уверен, почему, но вместо вызова статической функции userFactory для создания экземпляра класса мне нужно было напрямую создать экземпляр при подключении компонента, например так:

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

Бонусные баллы, если кто-нибудь может объяснить, почему это необходимо.

person Chris Halcrow    schedule 01.02.2018
comment
о чувак. Вы спасли мой день. Просто столкнитесь с той же проблемой при попытке заменить директиву на компонент. - person skyboyer; 12.03.2018
comment
только что узнал, что это упоминается в Guide@AngularJS Docs как крошечный комментарий, но без какой-либо мотивации /объяснение. - person skyboyer; 12.03.2018
comment
Спасибо @skyboyer, я выполняю обновление с AngularJS до Angular и обнаружил, что обновление до компонентов в любом случае почти бесполезно как часть пути миграции, поскольку архитектура Angular все еще значительно отличается. Мой текущий подход заключается в том, чтобы полностью переписать мой AngularJS как компоненты Angular, поскольку это делает обновление более простым. - person Chris Halcrow; 13.03.2018