In Angular (Angualr 4) Nicht in der Lage, die ElementRef einer anderen Komponente für den Zugriff auf mit @ViewChild

Question

Ich habe versucht, das Kind Komponente @ViewChild mit in Parent-Komponente zuzugreifen (AppComponent.ts)

 import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; 
     import { HeaderComponent } from '../app/components/header/header.component'; 
     @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.less'] 
     }) 
     export class AppComponent implements AfterViewInit { 
     title = 'app'; 
     @ViewChild('myHeader') myHeader: ElementRef; 
     ngAfterViewInit() { 
      this.myHeader.nativeElement.style.backgroundColor = 'red'; 
     } 
     } 

Eltern HTML (app.component.html)

<div> 
    <app-header></app-header> 
</div> 

Jetzt Kind HeaderComponent ist wie folgt:

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

    @Component({ 
     selector: 'app-header', 
     templateUrl: './header.component.html', 
     styleUrls: ['./header.component.less'] 
    }) 
    export class HeaderComponent implements OnInit { 
     constructor() { 
     } 
     ngOnInit() { 

     } 

    } 

-Header HTML (header.component.html) (Child)

<div #myHeader> hello</div> 

In ngAfterViewInit Funktion this.myHeader.nativeElement schenkt Fehler.

AppComponent_Host.html:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined 
at AppComponent.webpackJsonp.../../../../../src/app/app.component.ts.AppComponent.ngAfterViewInit (app.component.ts:12) 
at callProviderLifecycles (core.es5.js:11189) 
at callElementProvidersLifecycles (core.es5.js:11164) 
at callLifecycleHooksChildrenFirst (core.es5.js:11148) 
at checkAndUpdateView .... 

Obwohl, wenn ich versuchte, jedes Kind in Parent HTML (app.component.html) definiert den Zugriff auf seine wie unten arbeiten:

<div #myHeader> <app-header></app-header></div> 

Aber ich möchte in header.component jede ElementRef zuzugreifen. html.Ich habe müde View View Encapsulation auch wie unten.

encapsulation: ViewEncapsulation.None, 

in HeaderComponent aber nicht working.Please lassen Sie mich auch wissen, was sonst noch hier bin ich fehlt.

Answer 1

Sie können nicht direkt auf die Elementreferenz von untergeordneten Komponentenvorlagen zugreifen. Sie können in Ihrer AppComponent auf HeaderComponent zugreifen, indem Sie mithilfe der Kopfkomponentenreferenz auf alle öffentlichen Eigenschaften von HeaderComponent zugreifen können. In HeaderComponent können Sie auf jedes Element von HeaderComponent Vorlage & zugreifen, die als öffentliche Eigenschaft verfügbar machen.

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

@Component({ selector: 'app-header', templateUrl: './header.component.html', 

styleUrls: ['./header.component.less'] 
    }) 
export class HeaderComponent implements OnInit { 
     @ViewChild('myHeader') 
    public myHeader: ElementRef; 
     constructor() { } 
     ngOnInit() { } 
     } 

    /*---- AppComponent----*/ 
    import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core'; 
import { HeaderComponent } from '../app/components/header/header.component'; 



@Component(
{ selector: 'app-root', 
templateUrl: './app.component.html', styleUrls: ['./app.component.less'] 
}) 
export class AppComponent implements AfterViewInit 
{ title = 'app'; 

@ViewChild(HeaderComponent) 
header: HeaderComponent; 

ngAfterViewInit() { 
this.header.myHeader.nativeElement.style.backgroundColor = 'red'; 
} 

} 

Answer 2

Wenn Sie Component verwenden als @ViewChild Sie direkt ihre Instanz einstellen statt ElementRef

@ViewChild(HeaderComponent) myHeader: HeaderComponent; 

Falls Sie ElementRef verwenden Sie den Wähler im HTML angeben sollten, wie unten,

<div #myHeader> hello</div>