从父组件访问子组件数据

Question

我在子组件中有一个列表。我想从父组件（AppComponent）访问此列表并使用 @ViewChild 装饰器显示它，但该列表在父组件中始终未定义

export class CategorieComponent implements OnInit {
    @Output() listCategories: Categorie[];

    constructor(private http: HttpClient) {
        this.http.get<Categorie[]>('api/Categorie').subscribe(value => {
            this.listCategories = value;
        });
    }

    ngOnInit() {

    }
}

应用-component.ts

@ViewChild(CategorieComponent, { static: false })
private categoryComponent: CategorieComponent;
.
.
.
ngAfterViewInit() {
    this.listCategories = this.categoryComponent.listCategories;
}

app.component.html

<option *ngFor="let cat of listCategories" [value]="cat.idCat" [selected]="cat.idCat == projet.idCat">
    {{cat.nomCat}}
</option>

Answer 1

不太确定你想在这里做什么。但是由于 CategorieComponent 中需要一个 AJAX 调用，并且您想了解 AppComponent 中数据检索成功的信息，因此公开 listCategories 属性作为 @Output 属性.

但是您必须将其声明为 EventEmitter<Array<Categorie>> 类型。像这样：

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
import { HttpClient } from "@angular/common/http";

import { Categorie } from "../categorie.model";

@Component({
  selector: "app-categorie",
  templateUrl: "./categorie.component.html",
  styleUrls: ["./categorie.component.css"]
})
export class CategorieComponent implements OnInit {
  @Output() listCategories: EventEmitter<Categorie[]> = new EventEmitter<Categorie[]>();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<Categorie[]>("/assets/categorie.json").subscribe(value => {
      console.log(value);
      this.listCategories.emit(value);
    });
  }
}

在 AppComponent 中，我不太确定您为什么使用 ViewChild。您只需调用一个方法来处理 listCategories @Output 事件。像这样：

<app-categorie 
  (listCategories)="setListCategories($event)">
</app-categorie>

<select name="" id="" *ngIf="listCategories">
  <option 
    *ngFor="let cat of listCategories" 
    [value]="cat.idCat" 
    [selected]="cat.idCat == projet.idCat">
    {{cat.nomCat}}
  </option>
</select>

然后您可以像这样定义 setListCategories 方法：

listCategories: Array<Categorie>;
projet = { };

setListCategories(listCategories) {
  console.log('listCategories:: ', listCategories);
  this.listCategories = listCategories;
}

Here's a Sample Working Code for your ref.

从父组件访问子组件数据

Access child component data from parent component

angular

viewchild