Javascript 有人知道Angular中组件共享数据的最佳方式吗？

有人知道从一个组件向另一个组件发送特定数据的最佳方法吗。 这意味着，例如，如果我在my（固定导航栏组件）中使用输入文本值，则提交的值可以在其他组件中使用，就像我在这些组件中提交了这些数据一样

例如

navbar.component.html

<input [(ngModel)]="text" [ngModelOptions]="{standalone: true}" type="text">
  <button [routerLink]="['/search',text]" type="submit">Search</button>

我正在尝试获取navbar.component.html中提交的值，并在search.component.html中随意使用它

---

从上面的URL获取它的问题不起作用，因为它只在呈现searching.component页面时获取值，而不是在启动navbar.component.html中的按钮时获取值

我非常喜欢Angular，但我认为它的缺点之一是在两个不相关的组件之间进行通信。如果他们是孩子的父母，这很容易，但除此之外，你需要使用一个服务和一个主题

@Injectable()
export class SearchingService {
    private subject = new Subject<any>();

    submitSearch(message: string) {
        this.subject.next({ text: query});
    }

    clearSearch() {
        this.subject.next();
    }

    getSearch(): Observable<any> {
        return this.subject.asObservable();
    }
}

@Injectable（）
导出类搜索服务{
私有主体=新主体（）；
submitSearch（消息：字符串）{
this.subject.next（{text:query}）；
}
clearSearch（）{
this.subject.next（）；
}
getSearch（）：可观察{
返回此.subject.asObservable（）；
}
}

然后，您可以将该服务注入navbar组件和搜索组件中

当您的导航栏想要提交查询时，它可以调用searchService.submitSearch（查询）

那么在searchComponent中

searchService.getSearch（）.subscribe（query=>//处理查询）

---

您还可以订阅任何组件中的搜索结果，或提交来自任何组件的搜索。所以它非常灵活，即使它需要一秒钟的时间来包裹你的头。搜索服务是一个中间人，它使用可观测数据来实现这一点。

查看3种角度组件之间的通信方式=>

@Injectable()
export class SearchingService {
    private subject = new Subject<any>();

    submitSearch(message: string) {
        this.subject.next({ text: query});
    }

    clearSearch() {
        this.subject.next();
    }

    getSearch(): Observable<any> {
        return this.subject.asObservable();
    }
}