如何从 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
数组中:
...
directives: [ROUTER_DIRECTIVES, ExtendedRouterLinkDirective],
...
但是,我收到以下运行时错误:
"Template parse errors: Can't bind to 'extendedRouterLink' since it isn't a known native property"
如果我从我的指令中删除 extends 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
}
}
关于typescript - 以 Angular 2 扩展 routerLink?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38306703/