Ghi đè/mở rộng mẫu của thành phần bên thứ ba

Question

Tôi hiện đang nhập một thành phần của bên thứ ba. Đối với trường hợp sử dụng của tôi, tôi cần ghi đè mẫu thành phần cụ thể đó.

Vì đây là thành phần của bên thứ ba và được nhập qua gói npm, tôi không muốn thay đổi thành phần nên tôi không phải cập nhật nó mỗi lần gói được cập nhật.

Có cách nào để ghi đè mẫu của thành phần khác không?

Tôi biết bạn có thể sử dụng <ng-content> nếu bạn muốn tiêm một số phần tử. Nhưng đây không phải là khả thi.

Các html là một cái gì đó như thế này:

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

Bộ điều khiển là một cái gì đó như thế này:

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

Có cách nào tôi có thể xác định các mẫu tôi muốn cho <third-party-component> mà không cần chỉnh sửa mà thành phần cụ thể tờ khai? Hoặc thậm chí mở rộng nó chỉ?

Answer 1

Bạn có thể sử dụng Phản chiếu để thay đổi siêu dữ liệu của thành phần. Đây là 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 {} 

Chỉ cần chắc chắn bạn cập nhật mẫu trước tiêm nó vào thành phần cha mẹ. Ngoài ra, hãy kiểm tra which metadata bạn cần truy cập, có thể là DirectiveMetadata trong trường hợp của bạn.

Answer 2

Sau khi chơi với nó. Một mở rộng đơn giản sẽ làm việc cho trường hợp sử dụng của tôi.

Về cơ bản tôi đã tạo một lớp mở rộng thirdPartyClass.

Điều xảy ra ở đây là tôi ghi đè mẫu cho thirdPartyClass bằng cách tạo công cụ chọn của riêng tôi và chỉ nhập lớp.

Something như thế này:

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

Ghi chú:

• Nếu bạn đang sử dụng phương pháp này, đừng quên để nhập khẩu bất kỳ ống được sử dụng trong các thirdPartyClass mẫu.
• Nếu chức năng được cập nhật trong thirdPartyClass phụ thuộc vào mẫu, bạn sẽ cần cập nhật bằng tay.
• Tôi thích giải pháp này để chỉ đến ReflectMetaData vì nó là một mở rộng đơn giản thay vì truy cập các chú thích và bắt buộc thay đổi nó.