我试图显示一个弹出窗口（模态），如果用户在文本框中输入任何文本，并点击一个副标题显示他的确认模态。
我已经做了模态的一部分，如点击副标题。但想显示它只有当用户输入一些文本，并在该副标题点击。
为此，我在html中使用（keyup）将其作为eventEmitter的值传递。
下面是我的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);
  }
}

在控制台上，我可以看到我是否在文本框中输入了任何文本，所以我认为它能够发出我输入的值。
但是在父组件中，我尝试获取发射值，但是没有调用发射事件方法。
这是我的nav.component.ts代码，我把它当作我的父组件。

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 & CANCEL button',
      actionButtonText: 'Ok'
    };
    const modalDialog = this.matDialog.open(ModalComponent, dialogConfig);
  }

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

}

• • 导航组件. html的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%2Fapp%2FParent%2Fparent.component.html

但是我不是成功的，不知道还有什么地方出了问题。在确切的问题上有什么线索吗？
谢谢。