如何从Angular Router v3扩展[routerLink]指令,以便我自己包装一些自定义功能？我看了一下
RouterLinkWithHref指令,看来这就是我要扩展的内容,所以我制作了这个：
ExtendedRouterLinkDirective
import {Directive,Input} from '@angular/core';
import {RouterLinkWithHref} from "@angular/router";
import {Model} from "../Classes/Model.class";
@Directive({
selector: 'a[extendedRouterLink]'
})
export class ExtendedRouterLinkDirective extends RouterLinkWithHref {
@Input('extendedRouterLink') model : Model;
// Future custom logic
}
我试着像这样使用它：
<a [extendedRouterLink]="model">
我将它包含在我的组件的指令数组中：
... directives: [ROUTER_DIRECTIVES,ExtendedRouterLinkDirective],...
但是,我得到以下运行时错误：
“Template parse errors: Can’t bind to ‘extendedRouterLink’ since it isn’t a known native property”
如果我从我的指令中删除扩展的RouterLinkWithHref,它可以正常工作.我究竟做错了什么？
解决方法
我需要同样的东西.使用您的帖子,我能够使它工作.这是缺少的：
@Input() mgiRouterLink: string ngOnInit()
ngOnInit() {
this.href = this.routerLink = this.mgiRouterLink
}
父routeLink指令期望this.href和this.routerLink保存DOM属性中的数据.现在它看起来像这样：
import {Directive,Input} from '@angular/core';
import {RouterLinkWithHref} from "@angular/router";
import {Model} from "../Classes/Model.class";
@Directive({
selector: 'a[extendedRouterLink]'
})
export class ExtendedRouterLinkDirective extends RouterLinkWithHref {
@Input() mgiRouterLink: string ngOnInit()
ngOnInit() {
this.href = this.routerLink = this.mgiRouterLink
}
}
