Angular - 尝试在父视图中使用子组件功能，但出现错误

Question

当我使用@ViewChild 时，我收到未定义组件的错误。 当我使用 @ViewChildren 时，我收到该组件中的函数不是函数的错误。

我不熟悉在 Angular 中使用子组件，所以当我确实在父组件中定义了子组件并且它显然是子组件中的一个函数时，我不确定它为什么会这样做。

我不想在父级中定义来自子级的每个函数，否则使用单独组件的意义何在。

子组件

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

@Component({
  selector: 'app-mood',
  templateUrl: './mood.component.html',
  styleUrls: ['./mood.component.css']
})
export class MoodComponent implements OnInit {

  moodColors = ['red', 'orange', 'grey', 'yellow', 'green'];

  constructor() { }

  ngOnInit(): void {
  }

  chooseMood() {
    alert(this.moodColors);
  }

}

父组件（带有“ERROR TypeError: ctx_r3.mood is undefined”的版本相关部分）

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { MoodComponent } from '../mood/mood.component';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {

  @ViewChild('mood') mood: MoodComponent = new MoodComponent;

父组件（带有“ERROR TypeError: ctx_r3.mood.chooseMood is not a function”的版本相关部分）

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { MoodComponent } from '../mood/mood.component';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarComponent implements OnInit {

  @ViewChildren('mood') mood: MoodComponent = new MoodComponent;

父视图

<h2 (click)="mood.chooseMood()"></h2>

Answer 1

您没有通过new 显式初始化视图子级。

只需使用：

@ViewChild('mood') mood : MoodComponent;

如果这不起作用，请发布一个 Stackblitz 示例，我可以对其进行编辑以解决问题。

此外，在 Angular 中使用 ViewChild 更像是一个例外，您对它的使用表明可能存在设计问题。您的子组件更有可能通过 Output 向父组件发出。

关于输出，你可以做这样的事情——尽管如果不深入了解你想要达到的目标，很难给出准确的答案：

export class MoodComponent implements OnInit {
 @Input() moodId: string;
 @Output() chooseMood = new EventEmitter<string>();

  moodClicked(){
    this.chooseMood.emit(moodId);
  }
}

export class CalendarComponent implements OnInit {
  moodChosen(string: moodId){
    console.log(moodId);
  }
}

// Calendar template:

<app-mood
  moodId="happy"
  (chooseMood)="moodChosen($event)"
></app-mood>

Answer 2

1 - 您必须使用此代码

@ViewChild('mood') mood : MoodComponent;

当您使用@ViewChildren 时，它将返回带有“心情”名称的项目列表，然后您必须使用此代码

mood.first.chooseMood() ;

当你的元素中有 ngIf 时，最好使用 ViewChildren

2- 初始化情绪变量不需要新关键字 它会在 ngOnInit 生命周期触发后被填充