将数据从子组件传递到appcomponent，而不存在循环依赖关系

Question

我已经将我的angular应用程序划分为多个库。

我的应用程序组件模板将看起来像

<app-header></app-header>
<router-outlet><router-outlet>
<app-footer></app-footer>

此外，我配置了一些路线，如

/home-home组件
/users/user-user组件(作为子组件用户组件内部的组件(

现在我需要将数据从home或用户组件传递到header组件。

我知道这可以通过使用服务或商店来实现。

但我的问题是，由于这一点，头、主、用户都在不同的库中，我得到了循环依赖。

所以我现在尝试的是先将数据从home/user传递到appcomponent，然后将数据从appcomponent传递到header使用@Output、@Input和emitter。但我无法将数据传递给<router-outlet>

请帮助我解决这种情况

Answer 1

您的头组件和主组件没有相互连接。您应该尝试使用BehaviourSubject并通过服务传递它。服务应如下所示：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}

比方说，你在主组件上有一个按钮，你想在组件的init方法上显示这个消息。然后这样称呼它：

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
styleUrls: ['./sibling.component.css']
})
export class HomeComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}