从孙子组件 Angular 9 发出事件（或替代）

Question

我的结构类似于 AngularJS 应用程序-> Angular 组件（主）-> 子组件-> 孙子组件。 我的孙子组件上发生了点击事件，我想向 AngularJS 应用程序发出事件。 我在我的 AngularJS 应用程序中添加了监听器，如果我从主组件发出事件，那么它可以工作，但不能来自孙子。 将每个级别的事件链接起来可能是一个解决方案，但看起来并没有优化，因为可能有很多这样的事件。 我在一些线程上读到，从服务中发出事件不是一个好习惯（我仍然尝试过，但无论如何都没有工作）。 还有其他方法吗？

Answer 1

看看 RxJS 主题。 每当点击事件发生时，在 grandChild 中，执行 subject.next subject.next(); 然后在 AngularJS 应用程序中订阅它。

Answer 2

请尝试下面给定的代码

 // -------------------------------------- // app.component.html <div> <span>Master to Child </span><input type="textbox" [(ngModel)]='master'> </div> <app-child [childToMaster]=master (childToParent)="childToParent($event)"></app-child> <app-grand-child [childToMaster]=master (childToParent)="childToParent($event)"></app-grand-child> // -------------------------------------- // app.component.ts import { Component, Output,EventEmitter } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { //passing values from parent to child master: String="send from parent"; //Getting value from child childToParent(name){ this.master=name; } } // -------------------------------------- // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { AppChildComponent } from './app-child.component'; import { AppGrandChildComponent } from './app-grand-child.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, AppChildComponent, AppGrandChildComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } // -------------------------------------- // app-grand-child.component.ts import { Component, Input, Output,EventEmitter } from '@angular/core'; @Component({ selector: 'app-grand-child', template: ` <input type="textbox" [(ngModel)]='masterName'> <button (click)="sendToParent(masterName)" >sendToParent</button> <div>{{masterName}}</div> ` }) export class AppGrandChildComponent { //getting value from parent to child @Input('childToMaster') masterName: string; @Output() childToParent = new EventEmitter<String>(); sendToParent(name){ //alert("hello"); this.childToParent.emit(name); } } // -------------------------------------- // app-child.component.ts import { Component, Input, Output,EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <input type="textbox" [(ngModel)]='masterName'> <button (click)="sendToParent(masterName)" >sendToParent</button> <div>{{masterName}}</div> ` }) export class AppChildComponent { //getting value from parent to child @Input('childToMaster') masterName: string; @Output() childToParent = new EventEmitter<String>(); sendToParent(name){ //alert("hello"); this.childToParent.emit(name); } }