在Angular（Angular 4）中，無法使用@ViewChild訪問另一個組件的ElementRef

Question

我試圖使用父組件（AppComponent.ts）中的@ViewChild訪問子組件

      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>

現在，Child 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>

但是我想訪問header.component.html中的任何ElementRef。我很累也有如下所示的View Encapsulation。

encapsulation: ViewEncapsulation.None,

在HeaderComponent中，但它也無法正常工作。請讓我知道我在這里還缺少什么。

Answer 1

將Component用作@ViewChild ，可以直接設置其實例而不是ElementRef

@ViewChild(HeaderComponent) myHeader: HeaderComponent;

如果您使用的是ElementRef ，則應在HTML中指定選擇器，如下所示：

<div #myHeader> hello</div>

Answer 2

您不能直接從子組件模板訪問元素引用。 您可以在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'; 
}

 }