Не удается передать исходящее событие от дочернего компонента к родительскому

#typescript #event-handling #angular-directive #angular12 #angular-event-emitter

Вопрос:

Я пытаюсь отобразить всплывающее окно (модальное), если пользователь вводит какой-либо текст в текстовые поля и нажимает на подзаголовок, показывая ему модальное подтверждение.

Я сделал модальную часть, как при нажатии подзаголовка. Но хотел показать его только тогда, когда пользователь введет какой-то текст и щелкнет в этом подзаголовке.

Для этого я использую (ключ) в html, чтобы передать его в качестве значений в качестве источника событий.

Ниже мой search.component.html это дочерний компонент

 <div>
  <form [formGroup]="form">
    <div *ngFor="let field of searchFields" class="column">
      <app-form-field [field]="field" [form]="form" (keyup)="sendToParent(this.form.value)"></app-form-field>
    </div>
    <div class="button-container">
      <app-button [type]="this.button.RESET"></app-button>
      <app-button [type]="this.button.SEARCH"></app-button>
    </div>
  </form>
</div>
 

Это мой код search.component.ts

 import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import { ButtonType } from '../../shared/button/button-type';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

import { FormBase } from '../../shared/form/models/form-base';
import { FormService } from '../../services/form.service';


@Component({
  selector: 'app-landing-form',
  templateUrl: './search.component.html',
  styleUrls: ['../landing.component.scss'],
  providers: [FormService]
})

export class SearchComponent implements OnInit {

  @Input() searchFields:FormBase<string>[] | null = [];
  @Output() outputToParent = new EventEmitter<string>();
  form:FormGroup;
  value:string="Apples";

  public get button():typeof ButtonType {
    return ButtonType;
  };

  constructor(private formService:FormService) {
  }

  ngOnInit() {
    this.form = this.formService.toFormGroup(this.searchFields as FormBase<string>[]);
  }

  sendToParent(value: any) {
    console.log("Emmitted event from search   ", value);
    this.outputToParent.emit(value);
  }
}

 

На консоли я могу видеть, ввожу ли я какой-либо текст в текстовые поля, которые он печатается. Поэтому я думаю, что он способен выдавать значения, которые я ввел.

But in the parent component I am trying to get the emitted values but the emitted event method is not getting called.

this is my nav.component.ts code which I am treating it as my parent component.

 import {Component, Input, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {ModalComponent} from "../components/modal/modal.component";
import {MatDialog, MatDialogConfig} from "@angular/material/dialog";


@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})

export class NavComponent implements OnInit {
  recievedFromChild:string="empty";

  constructor(private router:Router,
              public matDialog: MatDialog) {
  }
  // $event: any;
  ngOnInit():void {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

  openLogoutModal() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.id = 'modal-component';
    dialogConfig.data = {
      name: 'Ok',
      title: 'Do you want to reload/refresh the screen. Entered Search data or Results would be Lost" and an OK amp; CANCEL button',
      actionButtonText: 'Ok'
    };
    const modalDialog = this.matDialog.open(ModalComponent, dialogConfig);
  }

  GetOutputVal($event: any) {
    console.log("Parent    ", this.recievedFromChild);
    this.recievedFromChild = $event;
  }

}

 

html-код для nav.component.html

 <div class="navigation-container">
  <div class="center-top flex-container">
    <a id="nav-system-parameters" class="left navigation" routerLink="/search" (click)="openLogoutModal()">System Parameters</a>
    <a id="nav-search" class="right navigation" routerLink="/search">Search</a>
  </div>
</div>
<app-landing-form (outputToParent)="GetOutputVal($event)"></app-landing-form>

 

Я ожидаю, что вызов метода GetOutputVal будет получен после того, как событие будет передано из дочернего компонента. Но это не называется.

это мое app.component.html код

 <div class="title-container">
  <div class="app-title flex-container">
    <h1 id="main-title" class="center-top">Main title</h1>
  </div>
  <div>
    <hr class="line">
  </div>
</div>
<app-nav></app-nav>
<router-outlet></router-outlet>

 

Я также попробовал точно так же, как упоминалось в

 https://stackblitz.com/edit/angular-t8app2?file=src/app/Parent/parent.component.html
 

но я не добился успеха, не знаю, что еще идет не так. Есть какие-нибудь зацепки по конкретному вопросу?

Спасибо.

Ответ №1:

 GetOutputVal($event: any) {
  console.log("Parent    ", this.recievedFromChild);
  this.recievedFromChild = $event;
}
 

должно быть:

 GetOutputVal($event: any) {
  this.recievedFromChild = $event;
  console.log("Parent    ", this.recievedFromChild);
}
 

Странно, что GetOutputVal имеет заглавную букву G. Также странно, что полученное неправильно должно быть получено. Но это не должно мешать работе вашего кода. Всегда стоит перезапустить сервер Angular dev, если у него проблема с кэшированием.

Комментарии:

1. Спасибо за предложение, я написал макет кода, поэтому вы видите некоторые ошибки, но главная проблема в том, что сам метод GetOutputVal не вызывается. Не знаю почему….