如何将子输出传递给 Angular 中包含路由器出口的应用程序组件

Question

我想从子组件发出一个值到应用程序组件。组件结构是这样的：

index.html:

<app-root></app-root>

app.component.html:

<router-outlet></router-outlet>

app.component.ts:

@Component({
  selector: 'app-root',
  ...
})

export class AppComponent implements OnInit {

  change = false;

  ...

  getStatus(value: boolean): void {
    this.change = value;
  }

...
}

child.component.ts（通过路由器插座呈现，例如来自 URL like /child）：

@Component({
  selector: 'app-child',
  ...
})

export class ChildComponent implements OnInit {

  @Output() doStuff: EventEmitter<boolean> = new EventEmitter<boolean>();

  ...

  emitStuff(): void {
    this.doStuff.emit(true);
  }
}

child.component.html:

<a (click)="emitStuff()">Click</a>

现在，我应该在哪里附加 (doStuff)="getStatus() 绑定？

通常在 <app-child (doStuff)="getStatus()"> 中，但这不可用，例如在一个静态的 app.component.html 中，在某个地方写了 <app-child></app-child> 选择器。我只是不明白，抱歉 ;)

Answer 1

在 parent 组件中，您可以通过以下方式检索当前组件的实例：

<router-outlet (activate)="onActivate($event)" (deactivate)="onDeactivate()"></router-outlet>

然后订阅 child 的 EventEmitter 这只不过是一个 Observable:

onActivate(component) {
    if(component instanceof ChildComponent) {
        this.doStuffSubscription = component.doStuff.subscribe(x => ...);
    } 
}

onDeactivate() {
    if(this.doStuffSubscription)
        this.doStuffSubscription.unsubscribe();
}

如何将子输出传递给 Angular 中包含路由器出口的应用程序组件

How to pass child output to app component containing router-outlet in Angular

data-binding

parent-child

eventemitter

angular

angular-event-emitter