在角度2中扩展routerLink？

Question

如何扩展 Angular Router v3 中的

[routerLink]

指令，以便我可以自己封装一些自定义功能？我查看了

RouterLinkWithHref

指令，看来这就是我想要扩展的内容，所以我生成了这个：

扩展RouterLink指令

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],
...

但是，我收到以下运行时错误：

“模板解析错误：无法绑定到“extendedRouterLink”，因为它不是已知的本机属性”

如果我从指令

中删除

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

Answer 2

    /**
     * The url displayed on the anchor element.
     */
    @HostBinding('attr.href') override href: string|null = null;

我需要这个来覆盖 Angular 15 上的 href。 使用理查德上面的例子。

来源：https://github.com/angular/angular/blob/14.0.x/packages/router/src/directives/router_link.ts#L353