6

如何[routerLink]从 Angular Router v3 扩展指令，以便我可以自己包装一些自定义功能？我查看了RouterLinkWithHref指令，看来这就是我想要扩展的内容，所以我制作了这个：

扩展路由器链接指令

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从我的指令中删除，它可以正常工作。我究竟做错了什么？

4

1 回答 1

2

我需要同样的。使用您的帖子，我能够使其工作。这是缺少的内容：

@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  
    } 
}
于 2018-08-13T18:54:50.993 回答