在angular2中继承

Question

我试图理解角度4中的继承。

下面是我的AppComponent文件：

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';
  myArray= ["1","2","3"]; //THIS WORKS
  //myArray:any; //Declared but not initialized

  setTitle(value:any){
    this.title=value;
    console.log(this.myArray[2]);

  }
  ngOnInit(){
    //this.myArray=["1","2","3"]; //THIS DOESNT WORK

  }
}

这是扩展AppComponent的另一个组件

import { Component, blurbs } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-child',
  templateUrl: `<p>
  title {{title}}
  <button (click)="setTitle('child')">change title</button>
</p>`,
  styleUrls: ['./child.component.css']
})

export class ChildComponent extends AppComponent implements OnInit {

  constructor() {
    super();
   }

  ngOnInit() {
  }

}

在上面的代码中，我从ChildComponent调用setTitle（）方法。

我有myArray的控制台日志[2]。

如果我在声明它时初始化值，则该值可以正常工作。

但是，如果我只是在ngOnInit块中声明并初始化数组，则console.log不起作用，并告诉我myArray [2]未定义。

我在我的应用程序中有类似的场景，任何人都可以指导我什么是正确的方法以及为什么当我在ngOnInit块中初始化数组时它不起作用

Answer 1

ngOnInit方法在ChildComponent重新定义，这一行

   //this.myArray=["1","2","3"]; //THIS DOESNT WORK

从未被执行过。

如果ChildComponent应该从父类继承ngOnInit方法，它不应该定义自己的方法。如果它应该扩展它，它应该调用parent的方法：

  ngOnInit() {
    super.ngOnInit();
    ...
  }