覆盖子 ngOnInit 方法

Question

I want to add code to child's ngOnInit method from a parent class. Can I somehow do something similar to this?

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

And Parent:

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

The problem is that on the child constructor I do not have "this" available.

UPDATE: Find here the current code

For now, this is what I've done. Child class extends parent's ngOnInit and ngOnDestroy. What I want to achieve is to avoid calling parent "super.subscribeEvents();" like this:

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

What I want to do is to add code to the Child's ngOnInit from Parent. These are the classes:

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

And Parent:

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

Answer 1

the below solution should work.

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

Execution:

1. Created object of Child Class and assigned to a.

2. calling invokeSuperOnInit Method on the object a.

3. ngOnInit of the Parent is invoked.

4. In the parent NgOninit We are calling ngOnInit of the Child. The Child ngOnInit is invoked because "this" will always stay same through out the hierarchy.

Answer 2

In order to call methods on your child you need to add it in your parent's .component in the following way:

@ViewChild(Child) child: Child;

After your parent and child are instantiated you can use this.child.anyFunction();

An alternative is to use @Input for your child like:

@Input() test: number;

The parent's view should look like this:

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

While you define the variable in your component:

example: number;

ngOnInit() {
    this.example = 1;
}

Have also a look on ngOnChanges.