2016-08-25 2 views
1

내장 된 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); 
    } 

} 

내가이 지침의 인스턴스를 만들려고 오전 :

Can't bind to 'customRouterLink' since it isn't a known property of 'a'. 
다음 오류의 원인이되는

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

그러나 내가 extends RouterLinkWithHref을 제거하면 m 지시어 정의가 작동합니다.

예 plunkers :

  • CustomLinkDirective extends RouterLinkWithHref-RouterLinkWithHref을 확장하지 Shows error above
  • CustomLinkDirective-Directive created without error 당신은 당신의 모듈의 declarationsCustomLinkDirective을 추가하거나 더 나은 CustomLinkDirective에 대한 모듈을 만들고 추가 할 필요가
+0

결국 문제를 해결 했습니까? 비슷한 것을 시도하고 있었다. – Ryan

답변

0

이 모듈은 라우터 링크를 사용하려는 모듈의 imports: [...]입니다.

+0

모듈의'declaration'에'CustomLinkDirective'를 포함하는 새로운 플 런커를 만들었지 만 여전히 작동하지 않습니다. 생각? https://plnkr.co/edit/8JMdOQ4S1COHOkgA39kT – jwa

+0

또한 RouterLinkWithHref를 확장하지 않으면 지시문이 제대로 작동합니다. '선언 '의 부족이 왜 그것에 영향을 미칠지는 불분명하다. – jwa

+0

사실, 나는 모른다. 하지만 선언문에 추가되지 않았을 때 왜 그것이 효과가 있을지, 아니면 컴포넌트의 지시어에 추가했는지 궁금합니다. –

1

RouterLinkWithHref 클래스를 확장하려고 시도 할 때 동일한 오류가 발생했습니다. 오류는 지시문에 @Input 데코레이터를 포함하지 않는다는 사실에서 비롯된 것입니다. URL 문자열 <a [customRouterLink]="'http://www.google.com'">custom link</a>을 전달하려고 시도했지만 Angular가 클래스 내에서이 값을 바인딩하는 속성을 찾을 수 없으며 오류가 발생합니다. 이 문제를 해결하려면 @input('customRouterLink') link: string을 추가하면됩니다.