Przesłanianie/rozszerzanie szablonu komponentu innej firmy

Question

Aktualnie importuję komponent innej firmy. Dla mojego przypadku użycia muszę nadpisać ten konkretny szablon komponentu.

Ponieważ jest to komponent firmy trzeciej i jest importowany za pośrednictwem pakietu npm, nie chcę zmieniać składnika, więc nie muszę go aktualizować za każdym razem, gdy pakiet jest aktualizowany.

Czy istnieje sposób nadpisania szablonu innego komponentu?

Wiem, że możesz użyć <ng-content>, jeśli chcesz wstrzyknąć jakiś element. Ale tutaj nie jest opłacalne.

HTML jest coś takiego:

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

Kontroler jest coś takiego:

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

Czy jest jakiś sposób mogę określić szablon chcę dla <third-party-component> bez edycji danego elementu deklaracja? A może nawet rozszerzyć go?

Answer 1

Możesz użyć funkcji Reflect, aby zmienić metadane komponentu. Oto 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 {} 

Wystarczy upewnić się, zaktualizować szablon przed wstrzykiwanie go do elementu nadrzędnego. Sprawdź również, czy musisz mieć dostęp do which metadata, może to być DirectiveMetadata w twoim przypadku.

Answer 2

Po zabawie z nim. Prosty zasięg będzie działał dla mojego przypadku użycia.

Zasadniczo stworzyłem klasę, która rozszerza thirdPartyClass.

Co się dzieje, to to, że nadpisuję szablon dla thirdPartyClass, tworząc własny selektor i importując tylko klasę.

coś takiego:

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

Uwagi:

• Jeśli używasz tej metody, nie zapomnij, aby importować żadnych rur, które są używane w szablonie thirdPartyClass.
• Jeśli funkcjonalność została zaktualizowana w thirdPartyClass, która zależy od szablonu, należy zaktualizować ręcznie.
• Preferowałem to rozwiązanie, odwołując się do ReflectMetaData, ponieważ jest to prosty sposób na uzyskanie dostępu do adnotacji i wymuszenie jej zmiany.