Cuando uso @ViewChild, aparece el error de que el componente no está definido. Cuando uso @ViewChildren, aparece el error de que la función de ese componente no es una función.
Soy nuevo en el uso de componentes secundarios en Angular, por lo que no estoy seguro de por qué está haciendo esto cuando tengo el componente secundario definido en el componente principal y cuando es claramente una función en el componente secundario.
No quiero tener que definir cada función del niño en el padre o, de lo contrario, cuál es el punto de usar un componente separado.
Componente hijo
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); } }Componente principal (parte relevante de la versión con "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;Componente principal (parte relevante de la versión con "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;Vista principal
<h2 (click)="mood.chooseMood()"></h2>No inicializas explícitamente view children a través de new .
Solo usa:
@ViewChild('mood') mood : MoodComponent;Si eso no funciona, publique un ejemplo de Stackblitz que pueda editar para resolver el problema.
Además, el uso de ViewChild es más una excepción en Angular, y su uso apunta a un problema de diseño probable. Lo más probable es que su componente secundario emita a través de una Output al elemento principal.
Con respecto a los resultados, puede hacer algo como esto, aunque es difícil dar una respuesta precisa sin un conocimiento más profundo de lo que está tratando de lograr:
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>1 - tienes que usar este código
@ViewChild('mood') mood : MoodComponent;cuando usa @ViewChildren, devolverá una lista de elementos con el nombre de 'estado de ánimo', entonces debe usar este código
mood.first.chooseMood() ;es mejor usar ViewChildren cuando hay ngIf en su elemento
2- no se necesita una nueva palabra clave para inicializar la variable de estado de ánimo, se llenará después de que se active el ciclo de vida ngOnInit