2017-12-21 1 views
1

Ich versuche, Vererbung in Winkel 4.Vererbung in angular2

Im Folgenden zu verstehen ist meine AppComponent Datei:

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 

    } 
} 

Dies ist eine weitere Komponente, die AppComponent erstreckt

ist
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() { 
    } 

} 

In der über Code rufe ich die setTitle() Methode von der ChildComponent auf.

Ich habe ein Konsolenprotokoll für myArray [2].

Der Wert funktioniert gut, wenn ich den Wert während der Deklaration initialisieren.

Aber wenn ich nur das Array im ngOnInit Block deklarieren und initialisieren, funktioniert das console.log nicht und sagt mir, dass myArray [2] nicht definiert ist.

Ich habe ein ähnliches Szenario in meiner Anwendung kann mir jemand führen, was der richtige Weg ist und warum seine nicht funktioniert, wenn ich das Array in ngOnInit

Block initialisieren

Antwort

2

ngOnInit Methode in ChildComponent neu definiert wird, diese Linie

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

wird nie ausgeführt.

Wenn ChildComponent die Methode ngOnInit von der übergeordneten Klasse erben soll, sollte sie keine eigene Methode definieren. Wenn es erweitert werden soll, sollte es Eltern Methode aufrufen:

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

Danke..es funktioniert! –

+0

Gern geschehen. – estus