Question

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

例如

navbar.component.html

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

searching.component.ts

this.searchterm = this.route.snapshot.params['text'];

我正在尝试在navbar.compnent.html中提交该值，并随意在search.component.html中使用它。

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

Answer 1

我真的很喜欢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();
    }
}

然后，您可以将该服务注入导航栏组件和搜索组件中。

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

然后在你的searchComponent中你会有

searchService.getSearch（）。subscribe（query =＆gt; //查询内容）;

您还可以在任何组件中订阅搜索结果，或从任何组件提交搜索。所以它非常灵活，即使它需要一秒钟来包裹你的头。搜索服务是一种中间人，它使用可观察性来实现它。

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

1 个答案: