覆盖子 ngOnInit 方法答案

【问题标题】：Override child ngOnInit method覆盖子 ngOnInit 方法
【发布时间】：2018-10-02 17:57:25
【问题描述】：

我想从父类向孩子的 ngOnInit 方法添加代码。我能以某种方式做类似的事情吗？

export class Child extends Parent {
   constructor(){
      super(this.ngOnInit);
   }
   ngOnInit(){
      console.log('Child onInit');
   }
}

和家长：

export class Parent {
   constructor(childOnInitMethod: any){}
   ngOnInit(){
      console.log('Parent added code to child onInit');
      this.childOnInitMethod.apply(this, arguments)
   }
}

问题是在子构造函数上我没有可用的“this”。

更新：在这里找到当前代码

目前，这就是我所做的。子类扩展了父类的 ngOnInit 和 ngOnDestroy。我想要实现的是避免调用父“super.subscribeEvents();”像这样：

ngOnInit() {
   window.onresize = () => console.log('resizing');
   super.subscribeEvents();
}

我想要做的是将代码从父级添加到子级的 ngOnInit 中。这些是类：

export class DatatablePage extends EventSubscriber {
   @Output() onLoadRow: EventEmitter<any> = new EventEmitter();
   public gridApi: GridApi;
   constructor(
    events: Events
   ) {
    super(events, [
        { eventName: 'datatable:updateList', callbackFunction: () => this.onLoadRow.emit() },
        { eventName: 'datatable:resizeTable', callbackFunction: () => this.gridApi.sizeColumnsToFit() }
    ])
   }

   ngOnInit() {
       window.onresize = () => console.log('resizing');
       super.subscribeEvents();
   }
}

和家长：

export class EventSubscriber {


constructor(
    private events: Events,
    public eventSubscriptions: EventObject[]
) {
}

ngOnInit() {
    this.subscribeEvents();
}

ngOnDestroy() {
    this.unsubscribeEvents();
}

subscribeEvents() {
    this.eventSubscriptions.forEach((eventSubscription: EventObject) => {
        this.events.subscribe((eventSubscription.eventName), eventSubscription.callbackFunction)
    });
}

unsubscribeEvents() {
    this.eventSubscriptions.forEach((eventSubscription: EventObject) => {
        this.events.unsubscribe((eventSubscription.eventName), eventSubscription.callbackFunction)
    });
}
}

【问题讨论】：

您需要使用@Input()与孩子交流
你是说你不想用孩子的ngOnInit方法调用subscribeEvent？？
就是这样，我希望父母将代码添加到孩子的ngOnInit。这样扩展 EventSubscriber 的类如果有自定义的 ngOnInit 就不需要关心调用 parent

标签： javascript angular typescript inheritance

【解决方案1】：

下面的解决方案应该可以工作。

class Parent {
   constructor(){}
   ngOnInit(){
      console.log('Parent added code to child onInit');
      this.ngOnInit()
   }
}

class Child extends Parent {
    ngOnInit() {
      console.log('Child onInit');
    }
    invokeSuperOnInit() { 
        super.ngOnInit();
    }
}

const a = new Child();
a.invokeSuperOnInit();

执行：

创建子类的对象并分配给a。

在对象a上调用invokeSuperOnInit方法。

调用父级的ngOnInit。

在父级 NgOninit 我们调用子级的 ngOnInit。调用子 ngOnInit 是因为“this”将始终保持不变层次结构。

【讨论】：

问题是我不想手动调用父母 ngOnInit。我用具体的类更新了这个问题，以展示我最接近的方法。

【解决方案2】：

为了调用您孩子的方法，您需要通过以下方式将其添加到您父母的.component：

@ViewChild(Child) child: Child;

你的父母和孩子被实例化后，你可以使用this.child.anyFunction();

另一种方法是为您的孩子使用@Input，例如：

@Input() test: number;

父母的视图应该是这样的：

<child [test]="example"></child>

在组件中定义变量时：

example: number;

ngOnInit() {
    this.example = 1;
}

也看看 ngOnChanges。

【讨论】：

对不起，也许我没有正确解释自己。答案更多地与类继承有关，而不是角度组件结构。 @Punith Mithra 来对地方了