Обновите директиву AngularJS с помощью ngModel до компонента Angular - PullRequest
Новая
       19

Обновите директиву AngularJS с помощью ngModel до компонента Angular

0 голосов
/ 14 ноября 2018

Я пытаюсь обновить мою директиву AngularJS до Angular Component.

Вот код директивы: 

ng1AppModule.component('ng1Tmp', {
    bindings: {p: '<'},
    require: {ngModel: 'ngModel'}
});

И я попытался обновить ее: 

 @Directive({selector: 'ng1-tmp'})
 class Ng1HTmpComponent extends UpgradeComponent{
     @Input() p: string;
     @Input() ngModel: INgModelController;

     constrcutor(elementRef: ElementRef, injector: Injector) {
          super('ng1Tmp', elementRef, injector);
     }
}

Это не работает хорошо.Кажется, не поддерживает ngModel для обновления таким образом.Но я не вижу никакой связанной информации в этой документации: https://angular.io/guide/upgrade.

У кого-нибудь есть идеи по этому поводу?

Заранее спасибо.:)

1 Ответ

0 голосов
/ 14 ноября 2018

Angular не означает новую версию AngularJS, это разные структуры.3-й пункт должен быть известен перед кодом одного компонента: Input, Output и EventEmitter.

Один пример Директивы / Компонента здесь может немного помочь. 

//AngularJS directive, use it like <pagination></pagination>
app.register.directive('pagination', function () {
    return {
        restrict        : 'E',
        scope           : true,
        templateUrl     : '/views/widgets/pagination.html',
        controllerAs    : 'vm',
        controller      : PaginationController
    };
    PaginationController.$inject = ['$scope'];
    function PaginationController($scope) {
    }
});

И теперь я переопределил его на Angular.

//Angular6 Component, use it like 
//<app-pagination [pager]="pagination" (fired)="onFire($event)"></app-pagination>
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
    @Input() pager: any;
    @Output() fired = new EventEmitter<any>();

    constructor() { }

    ngOnInit() {
    }

    prev() {
        let page = this.pager.current_page - 1;
        if (page < 0) page = 1;
        this.fired.emit({type: 'page', data: page});
    }

    next() {
        let page = this.pager.current_page + 1;
        if (page > this.pager.page_count) page = this.pager.page_count;
        this.fired.emit({type: 'page', data: page});
    }

}

А на родительском Компоненте или Странице должно быть прослушано событие, например: 

onFire(event) {
    switch (event.type) {
        case 'page': //pagination component fire
            return this.gotoPage(event.data);
        case 'edit': //list item fire
            return this.editArticle(event.data);
        case 'view': //list item fire
            return this.viewArticle(event.data);
        case 'trash': //list item fire
            return this.trashArticle(event.data);
    }
}
...