Question

我试图使用@ViewChild访问子组件在父组件（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';
        }  
      }

父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: 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的模板＆amp;将其暴露为公共财产。

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

 }

在Angular（Angular 4）中，无法使用@ViewChild

2 个答案: