Question

我想扩展内置的routerLink指令来创建一个名为customRouterLink的指令。

我只创建了一个扩展RouterLinkWithHref的类：

@Directive({ 
     selector: 'a[customRouterLink]'
})
export class CustomLinkDirective extends RouterLinkWithHref {

  constructor(router: Router, route: ActivatedRoute, locationStrategy:  LocationStrategy) {
    super(router, route, locationStrategy);
  }

  @Input()
  set customRouterLink(data: any[]|string) {
      console.log("custom directive input", data);
  }

}

我正在尝试创建此指令的实例：

<a [customRouterLink]="'http://www.google.com'">custom link</a>

导致以下错误：

Can't bind to 'customRouterLink' since it isn't a known property of 'a'.

但是，如果我从指令定义中删除extends RouterLinkWithHref，它就可以工作。

示例掠夺者：

CustomLinkDirective extends RouterLinkWithHref - Shows error above
CustomLinkDirective未展开RouterLinkWithHref - Directive created without error

Answer 1

尝试扩展RouterLinkWithHref类时遇到了同样的错误。该错误来自于您没有为指令包含@Input装饰器的事实。您正在尝试传入您的网址字符串<a [customRouterLink]="'http://www.google.com'">custom link</a>，但Angular无法找到将此值绑定到您的类中的属性并引发错误。要解决此问题，只需添加@input('customRouterLink') link: string。

Answer 2

您需要将CustomLinkDirective添加到模块的declarations或更好地为CustomLinkDirective创建模块，并将此模块添加到您要使用的模块的imports: [...]你的路由器链接。

Answer 3

我成功做到了

@Directive({
    selector: '[customRouterLink]'
})
export class CustomRouterLinkDirective extends RouterLinkWithHref implements OnInit, OnDestroy {

    @Input('customRouterLink')
    link: string;

    constructor(
        router: Router,
        route: ActivatedRoute,
        locationStrategy: LocationStrategy
    ) {
        super(router, route, locationStrategy);
    }

    ngOnInit() {
        this.href = this.routerLink = this.link;
    }
}

别忘了您需要将指令注册到 app.module.ts

这是使用它的方式

 <a [customRouterLink]="/any/any">link</a>

扩展属性指令

3 个答案: