typescript - 以 Angular 2 扩展 routerLink？

Question

如何从 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，它可以正常工作。我做错了什么？

Answer 1

我也需要。使用你的帖子，我能够让它发挥作用。这是缺少的内容:

@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  
    } 
}