Angular CLI 在更改路线上刷新内容答案

【问题标题】：Angular CLI refresh content on change routeAngular CLI 在更改路线上刷新内容
【发布时间】：2018-08-20 21:21:47
【问题描述】：

我有一个 Angular CLI 应用程序。

在应用程序中，我有一张地图（右侧）和左侧面板（显示有关路线的当前信息）。如果我点击地图，openlayers 会找到最近的特征，并将我重定向到 /map/routeID/detail。一切都像魅力一样工作（在细节组件的 TS 上，我从 API 加载数据，如果一切正常的话）。问题是...如果我点击到另一个地方（靠近其他路线）URL 更改（所以我已被重定向到另一个路线详细信息）。 但信息很旧（来自另一条路线）。我正在加载 NgOnInit，我尝试打印控制台字符串，我发现当我的路线从 fox 示例更改时没有调用 NgOnInit / map/1/detail 到 /map/2/detail。

我该如何处理？例如，如果路由发生变化，NgOnInit 会再次触发或类似的事情。

【问题讨论】：

试试ngOnChanges(){ this.ngOnInit();}
它也不起作用。
NgOnInit 只会在组件创建时触发。当你在那条路线上时，我不相信它会再次触发。您如何在 NgOnInit 中获取 routeID 参数？如果您订阅 ActivatedRoute 参数更改以获得您应该拥有所需的 angular.io/api/router/ActivatedRoute
是的，我正在使用 this.routeId = this.activateDroute.snapshot.params['id'];从 URL 获取路由 ID。我如何订阅该参数？在订阅中我需要调用 NgOnInit？

标签： angular typescript angular-cli

【解决方案1】：

我相信您想观察路由参数的变化，而不是像评论中那样仅仅获取初始值。为此，您需要订阅ActivatedRoute 对象上的一个可观察对象（例如paramMap https://angular.io/api/router/ParamMap），然后运行每次路由更改所需的代码。

@Component({...})
class ExampleComponent {
    constructor(private route: ActivatedRoute) {
    }

    ngOnInit() {
        this.route.paramMap.subscribe(map => {
            // run code to process
        });
    }
}

请注意，paramMap 订阅不需要从according to the docs 取消订阅（它会自动为您取消订阅）。

【讨论】：