如何在Angularjs中覆盖组件 [英] How to override component in Angularjs

问题描述

我想覆盖自定义模块中的现有组件之一.

I want to override one of existing component in my custom module.

这是组件-

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

我想在模块中使用一些自定义逻辑覆盖其构造函数.因此，我创建了具有不同名称的相同组件，例如 CustomRichTextFieldComponent .

I want to override its constructor with some custom logic in my module. So i created same component with different name say 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();
  }
}

要在我的模块中使用此组件，我正在尝试类似..

To use this component in my module I am trying something like this ..

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

但是它不起作用.正确的方法是什么?

But its not working. What is the correct way to do ?

推荐答案

如果您希望您的 Component 组件在另一个 Module 组件中具有不同的行为，则正确的方法是注入与该模块具有不同值的服务.然后从component读取值并决定该怎么做.

If you want your Component two have a different behaviour in another Module, the right way is to inject a Service with a different value to that Module. Then read the value from component and decide what to do.

为您服务:

@Injectable()
export class MyService {
 type;

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

在您的模块中(每个模块的构造函数中都有一个不同的值):

In your module (each module a differnt value in constructor):

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

最后要在您的组件中

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

这篇关于如何在Angularjs中覆盖组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！