#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 не вызывается. Не знаю почему….