javascript - Cách ghi đè component trong Angularjs

Tôi muốn ghi đè một trong các thành phần hiện có trong module tùy chỉnh của mình.

Đây là thành phần -

import {SeComponent, TypedMap} from "smarteditcommons";
import {
GenericEditorField,
GenericEditorSanitizationService, IGenericEditor, SeRichTextFieldLocalizationService,
SeRichTextLoaderService
} from "smarteditcommons/components/genericEditor";
import "ckeditor";

@SeComponent({
templateUrl: 'seRichTextFieldComponentTemplate.html',
inputs: [
    'field:=',
    'qualifier:=',
    'model:=',
    'editor:=',
    'isDisabled'
]
})
export class SeRichTextFieldComponent {

public field: GenericEditorField;
public qualifier: string;
public model: TypedMap<any>;
public editor: IGenericEditor;

private mode: string;
private editorInstance: CKEDITOR.editor;

constructor(
    private seRichTextLoaderService: SeRichTextLoaderService,
    private seRichTextConfiguration: any,
    private genericEditorSanitizationService: GenericEditorSanitizationService,
    private seRichTextFieldLocalizationService: SeRichTextFieldLocalizationService,
    private $scope: angular.IScope,
    private $element: angular.IAugmentedJQuery
) {
    this.seRichTextLoaderService.load().then(() => {
        const textAreaElement = this.$element.find('textarea')[0] as HTMLTextAreaElement;
        this.editorInstance = CKEDITOR.replace(textAreaElement, this.seRichTextConfiguration);

        this.seRichTextFieldLocalizationService.localizeCKEditor();

        this.$element.bind('$destroy', () => {
            if (this.editorInstance && CKEDITOR.instances[this.editorInstance.name]) {
                CKEDITOR.instances[this.editorInstance.name].destroy();
            }
        });

        this.editorInstance.on('change', this.onChange.bind(this));
        this.editorInstance.on('mode', this.onMode.bind(this));
        CKEDITOR.on('instanceReady', this.onInstanceReady.bind(this));
    });
}
}

Tôi muốn ghi đè constructor của nó bằng một số logic tùy chỉnh trong module của mình. Vì vậy, tôi đã tạo cùng một component với tên khác, ví dụ CustomRichTextFieldComponent.

@SeComponent({
templateUrl: 'seRichTextFieldComponentTemplate.html',
inputs: [
    'field:=',
    'qualifier:=',
    'model:=',
    'editor:=',
    'isDisabled'
]
})
export class CustomRichTextFieldComponent extends SeRichTextFieldComponent {

public field: GenericEditorField;
public qualifier: string;
public model: TypedMap<any>;
public editor: IGenericEditor;

private mode: string;
private editorInstance: CKEDITOR.editor;

constructor(
    private seRichTextLoaderService: SeRichTextLoaderService,
    private seRichTextConfiguration: any,
    private genericEditorSanitizationService: GenericEditorSanitizationService,
    private seRichTextFieldLocalizationService: SeRichTextFieldLocalizationService,
    private $scope: angular.IScope,
    private $element: angular.IAugmentedJQuery
) {
     // custom changes
     super();
  }
}

Để sử dụng thành phần này trong module của tôi, tôi đang thử làm điều gì đó như thế này ..

angular.module('customRichTextModule', []).component('seRichTextFieldComponent', {
controller: ['CustomRichTextFieldComponent']});

Nhưng nó không hoạt động. Cách đúng để làm là gì?

Câu trả lời #1

Nếu bạn muốn Component của mình có hành vi khác trong một Module khác, cách đúng là tiêm một Service với giá trị khác vào Module đó. Sau đó đọc giá trị từ component và quyết định phải làm gì.

Trong dịch vụ của bạn:

@Injectable()
export class MyService {
 type;

 constructor(type){
  this.type = type;
 }
}

Trong mô-đun của bạn (mỗi mô-đun là một giá trị khác nhau trong hàm khởi tạo):

  providers: [
    { provide: MyService , useValue: new MyService(1)},

Và cuối cùng trong thành phần của bạn:

contructor(private service: MyService){
 if(service.type == 1){
  // do a different thing
 }
}