没有子标签的从子到父的 Angular 传递数据

Question

我尝试通过发射将数据从子级传递给父级，但我没有任何子级标签，只是通过路由转到子级，那么如何监听发射数据？

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>

specification-child.ts

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

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

如你所见，没有我可以使用的子标签

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

那我该怎么办？

Answer 1

在这种情况下，您可以使用单例服务来代替 EventEmitter，在父项和子项之间共享变量。

shared.service.ts

@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);
  }
}

我使用了 ReplaySubject(1) 可以缓冲/保存最后一个值并在订阅后立即发出它。您还可以根据需要使用 RxJS Subject 或 BehaviorSubject。

specification-child.ts

constructor(private shared: SharedService) { }

onSubmit() {
  this.shared.setSpecData({ this.specificationForm.value });
}

parent.ts

specData: any;
complete$ = new Subject<any>();

constructor(private shared: SharedService) { }

ngOnInit() {
  this.shared.specData$.pipe(
    takeUntil(this.complete$)   // <-- use to close the subscription
  ).subscribe(data => this.specData = data);
}

ngOnDestroy() {
  this.complete$.next();        // <-- close impending subscriptions
}