将ngModel的AngularJS指令升级到Angular组件 [英] Upgrade AngularJS directive with ngModel to Angular component
问题描述
我正在尝试将AngularJS指令升级到Angular Component.
I am trying to upgrade my AngularJS directive to Angular Component.
这是指令的代码:
ng1AppModule.component('ng1Tmp', {
bindings: {p: '<'},
require: {ngModel: 'ngModel'}
});
我尝试通过以下方式升级它:
And I tried to upgrade it by:
@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.
It doesn't work well. It seems not to support ngModel to upgrade in this way. But I don't see any related information in this documentation: https://angular.io/guide/upgrade .
有人对此有想法吗?
先谢谢了. :)
推荐答案
Angular并不意味着AngularJS的新版本,它们是不同的结构. 在编写一个组件之前,必须知道三点:输入,输出和事件发射器.
Angular not mean new version of AngularJS, them are different struct. 3 point must known before code one component: Input, Output and EventEmitter.
这里的一个示例指令/组件可能会有所帮助.
One example Directive/Component here may can some help.
//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上重新定义了它.
And now I was redefined it on 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});
}
}
在父Component或Page处,应监听事件,例如:
And at parent Component or Page, should be listen the event, like:
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);
}
}
这篇关于将ngModel的AngularJS指令升级到Angular组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!