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

Question

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

索引.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 （通过路由器出口呈现，例如来自 /child 之类的 URL）：

@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-child></app-child>选择器被写入某处的静态 app.component.html 中。我只是不明白，对不起;）

Answer 1

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

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

然后订阅孩子的EventEmitter，这不过是一个Observable：

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

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