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

Question

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

Answer 1

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

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

Emit event (or alternative) from grandchild component Angular 9

events

emit

angular-services

angular