angular - 无法以角度从父组件访问子组件

Question

我是角度的新手。所以可能我只是因为缺乏经验而错过了重要的事情。请帮助我从父级访问子组件。

app.module.ts

import { FilePickerComponent } from "src/app/common/file-picker/file-picker.component";
...
@NgModule({
  declarations: [
  FilePickerComponent,
  ...
  ]})
export class AppModule {}

文件选择器.component.ts

...
@Component({
  selector: "app-file-picker",
  templateUrl: "./file-picker.component.html",
  styleUrls: ["./file-picker.component.css"],  
})
...

编辑器.html

<form>
    ...
    <app-file-picker
        placeholder="Image"        
        required>
    </app-file-picker>
    ...
</form>

编辑器.ts

import {
  Component,
  OnInit,
  ViewChild,
  OnDestroy
} from "@angular/core";

import { FilePickerComponent } from "src/app/common/file-picker/file-picker.component";

export class Editor implements OnInit, OnDestroy {

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {

}

目前，当我尝试从保存中访问文件选择器时，它是未定义的。如何从 editor.ts 访问文件选择器组件？

标签： angular

Answer 1

export class Editor implements OnInit, OnDestroy {

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {

}

在上面的代码中，缺少 AfterViewInit 生命周期钩子的实现。在角度文档中，它指出这个生命周期钩子很重要。

组件交互的 Angular 文档

尝试更改上面的代码如下

import {
  Component,
  OnInit,
  ViewChild,
  OnDestroy,
  AfterViewInit
} from "@angular/core";


export class Editor implements OnInit, OnDestroy,AfterViewInit {

@ViewChild(FilePickerComponent) filePicker!: FilePickerComponent;
async save() {

}