ViewChild in Angular

Use Viewchild in Angular to access a child Component, Director, or DOM Element

Access directive

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import { SharkDirective } from './shark.directive';

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

    @ViewChild(SharkDirective)
    set appShark(directive: SharkDirective) {
        this.extraCreature = directive.creature;
    };

    ngAfterViewInit() {
        console.log(this.extraCreature); // Dolphin
    }
}

Access DOM Element

<input #someInput placeholder="Your favorite sea creature">

// ...
@ViewChild('someInput') someInput!: ElementRef;
ngAfterViewInit() {
    this.someInput.nativeElement.value = 'Whale!';
}
// ...

Access Child Component

子组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Child Component</p>`
})
export class AppChildComponent {
  whoAmI() {
    return 'I am a pup component!';
  }
  private mySelf() {
    return 'I am a private method!,Other component can not access me';
  }
}

父组件中添加子组件(AppChildComponent)

<app-child></app-child>

ViewChild访问子组件,并访问其非private方法

// ...
@ViewChild(AppChildComponent) childComp!: AppChildComponent;
ngAfterViewInit() {
    console.log(this.childComp.whoAmI()); // I am a pup component!
}
// ...