Question

我有这个问题。

聊天是一个父组件，它有消息子组件。我有url-s，/chat/，/chat/:id。我可以使用 RouteParams 在消息组件中获取:id参数，但我需要聊天组件中的:id。因此，如果我加载/chat/46，则聊天组件知道46 :id

如果我将其作为<messages (Event)="handleEvent()"></messages>之类的指令加载，而不是通过 EventEmitter 和输出传递它，但是如果我通过<router-outlet>加载组件我怎么能传递值回到父母？ EventEmitter和Output在这种情况下不起作用。也许路由器中有一些东西可以解决问题。

Answer 1

您可以按照建议通过组件之间的交互来完成此操作。这是一个例子：

组件interaction.service.ts

id = new Subject<number>();
idEmitter$ = this.id.asObservable();

sendId(id:number){
    this.id.next(id);
}

messages.component.ts

constructor(private router:Router, private cci:ComponentInteractionService){}

ngOnInit(){
    this.cci.sendId(this.router.param); // sending your params the way you get it
}

chat.component.ts

id:number;
subscription: Subscription;

constructor(private cci:ComponentInteractionService){}

ngOnInit(){
    this.subscription = this.cci.idEmitter$.subscribe(res =>this.id = res);
}

ngOnDestroy(){
    this.subscription.unsubscribe();
}

这样就可以订阅id更改，并且父母每次都可以更好地获取它。

编辑：根据Angular团队的建议，将EventEmitter更改为Subject和asObservable组合，并添加取消订阅以避免内存泄漏。

Answer 2

您应该考虑使用依赖注入在Chat（父级）和Message（子级）中注入SessionService实例（始终是同一个实例）。

当Child具有与Parent通信的值时，它可以将其存储到SessionService中;如果SessionService实例是相同的（由标准的Dependency Induction使用授权），那么Parent应该能够捕获Child想要传达的内容。

我希望它有所帮助

将数据从子组件传递到父组件（通过路由加载的子组件）

2 个答案: