Angular：在路由器出口中与子组件通信答案

【问题标题】：Angular: communicating to a child component when its in router-outletAngular：在路由器出口中与子组件通信
【发布时间】：2022-01-01 23:57:40
【问题描述】：

我有一个基本的应用程序：一个顶部栏和一个通用区域：（这是一个简化的 HTML 版本，来自 app.component.html）

<header>
    <app-top-bar >

    </app-top-bar>
</header>
<main>
    <div class="container-fluid">
       <router-outlet></router-outlet>    
    </div>
</main>

现在：在应用程序顶部栏中，我有一个 INPUT 用作一般搜索 - 搜索将应用于路由器插座内实时出现的任何组件。因此，我需要让子组件“知道”（通过调用它的方法或任何其他机制）已经输入了搜索词。

现在我知道父母如何与孩子（@input、@ViewChild...）进行交流，但在这种情况下我该怎么做 - 与根据用户导航而不断变化的孩子交流？

【问题讨论】：

标签： angular parent-child

【解决方案1】：

您可以在根级别创建 ServiceService，提供 search(...) 方法和返回 observable 的 searchChanges() 方法。然后只需将服务注入到支持全局搜索的组件中即可侦听搜索更改。

search.service.ts

@Inject({ providedIn: 'root' })
export class SearchService {
    private readonly searchChanges$ = new Subject<string>();

    search(text: string): void {
        this.searchChanges$.next(text);
    }

    searchChanges(): Observable<string> { 
        return this.searchChanges$.asObservable();
    }
}

top-bar.component.ts

@Component({ 
    selector: 'app-top-bar',
    ...
})
export class TopBarComponent {

    constructor(private searchService: SearchService) {
    }

    onSearch(text: string): void {
        this.searchService.search(text);
    }
}

other.component.ts

@Component({ 
    selector: 'app-other',
    ...
})
export class OtherComponent implements OnInit {

    constructor(private searchService: SearchService) {
    }

    ngOnInit(): void {
        this.searchService.searchChanges().subscribe(text => {
            // Handle search here
        });
    }
}

【讨论】：

似乎有效！谢谢！