在角（Angualr 4），不能使用@ViewChild

Question

我試圖訪問父使用@ViewChild 組件（AppComponent.ts）子組件訪問另一個組件的ElementRef

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

父HTML（app.component.html）

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

現在孩子HeaderComponent是如下：

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

     } 

    } 

頭HTML（header.component.html）（兒童）

<div #myHeader> hello</div> 

在ngAfterViewInit功能this.myHeader.nativeElement是給錯誤。

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 .... 

雖然當我試圖訪問它的工作就像下面父HTML（app.component.html）定義的任何孩子：

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

，但我想訪問任何ElementRef在header.component。我厭倦了View Encapsulation也如下圖。

encapsulation: ViewEncapsulation.None, 

在HeaderComponent

，但它也沒有working.Please讓我知道什麼我很想念這裏。

Answer 1

您無法直接從子組件模板訪問元素引用。 你可以在你的AppComponent中訪問HeaderComponent，使用頭文件組件引用你可以訪問HeaderComponent的所有公共屬性。 在HeaderComponent中，您可以訪問HeaderComponent的模板&中的任何元素，將其作爲公共屬性公開。

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

當您使用Component爲@ViewChild您可以直接設置它們的實例，而不是ElementRef

@ViewChild(HeaderComponent) myHeader: HeaderComponent; 

如果您正在使用ElementRef就應該在如下的HTML選擇，

<div #myHeader> hello</div>