Angular：在 router-outlet 中与 child 组件通信

Question

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

<header>
    <app-top-bar >

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

现在：在 app-top-bar 中，我得到了一个用作一般搜索的 INPUT - 搜索将应用于 router-outlet 中实时出现的任何组件。因此，我需要让 child 组件“知道”（通过调用其上的方法或任何其他机制）已输入搜索词。

现在我知道 parent 如何与 child 通信（@input、@ViewChild...），但在这种情况下我该怎么做 - 与 [=24 通信=] 根据用户导航不断变化？

Answer 1

您可以在根级别创建一个 ServiceService，提供一个 search(...) 方法和一个返回可观察对象的 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();
    }
}

顶部-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
        });
    }
}

Angular：在 router-outlet 中与 child 组件通信

Angular: communicating to a child component when its in router-outlet

parent-child

angular

search.service.ts

顶部-bar.component.ts

other.component.ts