アトリビュートディレクティブの拡張

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を削除した場合mディレクティブの定義は動作します。

例plunkers：

• CustomLinkDirective extends RouterLinkWithHrefからRouterLinkWithHrefを延長しないShows error above
• CustomLinkDirectiveからDirective created without errorあなたのモジュールのdeclarationsにCustomLinkDirectiveを追加したり、より良いCustomLinkDirectiveためのモジュールを作成して追加する必要が

Answer 1

このモジュールをルータのリンクを使用するモジュールのimports: [...]に転送します。

Answer 2

RouterLinkWithHrefクラスを拡張しようとしたときに同じエラーが発生しました。このエラーは、ディレクティブに@Inputデコレータを含めないという事実から来ています。 URL文字列<a [customRouterLink]="'http://www.google.com'">custom link</a>を渡そうとしていますが、この値をクラス内にバインドするプロパティが見つからず、エラーがスローされます。これを解決するには、単に@input('customRouterLink') link: stringを追加します。