Override/delete Drittanbieter-Komponente Vorlage

Question

Ich importiere derzeit eine Drittanbieter-Komponente. Für meinen Anwendungsfall muss ich diese spezifische Komponentenvorlage überschreiben.

Da dies eine Drittanbieter-Komponente ist und über das npm-Paket importiert wird, möchte ich die Komponente nicht ändern, sodass ich sie nicht jedes Mal aktualisieren muss, wenn das Paket aktualisiert wird.

Gibt es eine Möglichkeit, die Vorlage einer anderen Komponente zu überschreiben?

Ich weiß, Sie können <ng-content> verwenden, wenn Sie ein Element injizieren möchten. Aber hier ist nicht durchführbar.

Die html ist so etwas wie diese:

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

Der Controller so etwas wie diese:

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' 
    ]; 
} 

Gibt es eine Möglichkeit, die Vorlage angeben kann ich für <third-party-component> will, ohne die spezifische Komponente Bearbeitung Erklärung? Oder sogar nur erweitern?

Answer 1

Sie können Reflect verwenden, um Metadaten der Komponente zu ändern. Hier ist die 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 {} 

So stellen Sie sicher, dass Sie Vorlage aktualisieren vor es in übergeordnete Komponente injiziert wird. Überprüfen Sie auch which metadata Sie müssen zugreifen, möglicherweise DirectiveMetadata in Ihrem Fall.

Answer 2

Nach dem herumspielen damit. Eine einfache Erweiterung wird für meinen Anwendungsfall funktionieren.

Grundsätzlich habe ich eine Klasse erstellt, die die thirdPartyClass erweitert.

Was passiert hier ist, dass ich die Vorlage für die thirdPartyClass überschreiben, indem ich einen eigenen Selektor erstellen und nur die Klasse importieren.

Etwas wie folgt aus:

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() 
    } 
} 

Hinweise:

• Wenn Sie diese Methode verwenden, vergessen Sie nicht, alle Rohre zu importieren, die in der thirdPartyClass Vorlage verwendet werden.
• Wenn die Funktionalität in der thirdPartyClass aktualisiert wird, die von der Vorlage abhängt, müssen Sie von Hand aktualisieren.
• Ich bevorzugte diese Lösung, um auf die ReflectMetaData zu verweisen, weil es eine einfache Erweiterung ist, anstatt auf die Anmerkungen zuzugreifen und sie zu erzwingen.