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

Question

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

Answer 1

看看 RxJS 主题。 每当点击事件发生时，在 grandChild 中执行 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);
  }
}