第三者コンポーネントのテンプレートの上書き/拡張

Question

現在、サードパーティコンポーネントをインポート中です。私の使用事例では、その特定のコンポーネントテンプレートをオーバーライドする必要があります。

これはサードパーティのコンポーネントであり、npmパッケージからインポートされるため、コンポーネントを変更したくないので、パッケージが更新されるたびに更新する必要はありません。

他のコンポーネントのテンプレートを上書きする方法はありますか？

いくつかの要素を注入する場合は、<ng-content>を使用することができます。しかし、ここでは実行可能ではありません。

import {THIRD_PARTY_DIRECTIVES} from 'ng2-select/ng2-select'; 

@Component({ 
    selector: 'example-component', 
    directives: [THIRD_PARTY_DIRECTIVES] 
}) 
export class Example { 

    private items: Array<string> = [ 
    'whatever', 'whatever2', 'whatever3' 
    ]; 
} 

私はその特定のコンポーネントを編集せず、私は<third-party-component>のためのテンプレートを指定することができますどのような方法があります：

<third-party-component [items]="items" [example]="example"> 

コントローラは、このようなものです：

HTMLは次のようなものです宣言？それとも、それだけを拡張する？

Answer 1

Reflectを使用すると、コンポーネントのメタデータを変更できます。ここsuper simple exampleです：

import {Component} from 'angular2/core' 

@Component({ 
    selector: 'thing', 
    template: `Hi!`, 
}) 
export class Thing {} 

annotations = Reflect.getMetadata('annotations', Thing); 
for (let i = 0; i < annotations.length; i += 1) { 
    if (annotations[i].constructor.name === 'ComponentMetadata') { 
    annotations[i].template = 'Ho!'; 
    break; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    directives: [Thing], 
    template: `<thing></thing>`, 
}) 
export class App {} 

はちょうどあなたが親コンポーネントに注入前に、テンプレート を更新してください。また、あなたがアクセスする必要があるwhich metadataにチェックを入れ、あなたの場合はDirectiveMetadataかもしれません。

Answer 2

再生した後で。私のユースケースでは単純な拡張が機能します。

基本的に私はthirdPartyClassを拡張するクラスを作成しました。

thirdPartyClassのテンプレートを上書きしているのは、自分自身のセレクタを作成し、そのクラスだけをインポートすることです。このような

何か：

import {component} from 'angular2/core'; 
import {thirdPartyClass} from 'example/example'; 

@Component({ 
    selector: 'my-selector', 
    template: '<div>my template</div>' 
}) 

export class MyOwnComponent extends thirdPartyClass { 
    constructor() { 
    super() 
    } 
} 

ノート：

• あなたは、このメソッドを使用している場合は、thirdPartyClassテンプレートで使用されているすべてのパイプをインポートすることを忘れないでください。
• thirdPartyClassでテンプレートに依存する機能が更新されている場合は、手動で更新する必要があります。
• このソリューションは、ReflectMetaDataを参照することを推奨しました。これは、アノテーションにアクセスして強制的に変更するのではなく、シンプルに拡張できるからです。