Question

我想从父类向孩子的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)
    });
}
}

Answer 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上调用invokeSuperOnInit方法。

  调用父级的

ngOnInit。



在父NgOninit中，我们称为子ngOnInit。之所以调用Child ngOnInit，是因为“ this”始终保持不变   层次结构。

Answer 2

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

@ViewChild(Child) child: Child;

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

另一种选择是为孩子使用@Input，例如：

@Input() test: number;

父母的观点应如下所示：

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

在组件中定义变量时，

example: number;

ngOnInit() {
    this.example = 1;
}

还可以查看ngOnChanges。

覆盖子ngOnInit方法

2 个答案: