Angular 在没有子标记的情况下，将数据从子级传递到父级

我尝试通过发射将数据从子级传递到父级，但我没有任何子标记，只使用路由传递到子级，因此如何侦听发射数据

parent.html

<ul class="list-unstyled multi-steps">
    <li [ngClass]="{ ' is-active': status == 'first' }">
        <span routerLink="/room/specification"></span>
              step1
    </li>
    <li [ngClass]="{ ' is-active ': status == 'second' }">
         <span routerLink="/room/attributes" (click)="onClick()"></span>
              step2
    </li>
</ul>
<div class="content">
    <router-outlet></router-outlet>
</div>

如您所见，我没有可以使用的子标记

<child (specificationData)="getData($event)"></child>

---

那么我该怎么办呢？

在这种情况下，您可以使用在父级和子级之间共享变量的单例服务，而不是

EventEmitter

shared.service.ts

 @Output("specificationData") specificationData = new EventEmitter();

     onSubmit() {
      const data = { this.specificationForm.value };
      this.specificationData.emit(data);
     }

@Injectable({ providedIn: 'root' })
export class SharedService {
  private specDataSource = new ReplaySubject<any>(1);
  public specData$ = this.specDataSource.asObservable();

  public setSpecData(data: any) {
    this.specDataSource.next(data);
  }
}

parent.ts

 @Output("specificationData") specificationData = new EventEmitter();

     onSubmit() {
      const data = { this.specificationForm.value };
      this.specificationData.emit(data);
     }

@Injectable({ providedIn: 'root' })
export class SharedService {
  private specDataSource = new ReplaySubject<any>(1);
  public specData$ = this.specDataSource.asObservable();

  public setSpecData(data: any) {
    this.specDataSource.next(data);
  }
}

specData:any；
完成$=新主题（）；
构造函数（私有共享：SharedService）{}
恩戈尼尼特（）{
此.shared.specData$.pipe(
takeUntil（this.complete$）//this.specData=data）；
}
恩贡德斯特罗（）{
this.complete$.next（）；//此问题的一个解决方案是使用Angular Services。请检查以了解有关它们的更多信息

在服务中，您可以使用
EventEmitter
，但要使用约定。您可以在服务中创建主题的实例，并使用它将数据从一个组件发送到任何其他组件

示例服务如下所示：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  dataSubject = new Subject<TypeOfData>();

  constructor() { }

}

然后，只需订阅父组件中的主题：

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.dataSubject.subscribe(data => {
      // Do something with the data
    });
  }

您完全可以将数据的发送作为一个单独的方法提取出来，但上面是如何使用该服务的一个基本示例。
在Angular 7.2.0+

parent.component.ts

    <ul class="list-unstyled multi-steps">
    <li [ngClass]="{ ' is-active': status == 'first' }">
        <span [routerLink]="/room/specification" [state]="{data: {...}}"></span>
              step1
    </li>
    <li [ngClass]="{ ' is-active ': status == 'second' }">
         <span [routerLink]="/room/attributes"  [state]="{data: {...}}"(click)="onClick()"></span>
              step2
    </li>
</ul>
<div class="content">
    <router-outlet></router-outlet>
</div>

您可以使用EventEmitter或Subject。在这种情况下建议使用Subject

您可以使用服务共享发出的值：

import {Injectable, EventEmitter} from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn : 'root'
})
export class AppService {
  constructor() {

  }

  public emitter: Subject<string> = new Subject<string>(); // Subject
 // public emitter : EventEmitter<string> = new EventEmitter(); // Event Emitter
 
  getEmittedValue() {
    return this.emitter;
  }

现在是时候在任何地方使用子组件发出的输出了。只要将我在上面创建的服务注入到您想要发出的值的任何地方，并订阅主题或事件发射器：

constructor(private appsService: AppService) {
    this.appsService.getEmittedValue().subscribe(res => this.ekMethod(res));
  }

谢谢你的回答。对于这一部分，new Subject（）强制添加1个参数，那么要添加什么？哪个版本？@Satish Hawalppagol 9.1.7
go(message: string) {
    console.log('Button Clicked ', message);
    this.appService.emitter.next(message); // Subject
   // this.appService.emitter.emit();  // Event Emitter
  }

constructor(private appsService: AppService) {
    this.appsService.getEmittedValue().subscribe(res => this.ekMethod(res));
  }