Angular 7：组件不会在后续访问中重新加载答案

【问题标题】：Angular 7: component doesn't reload on subsequent visitsAngular 7：组件不会在后续访问中重新加载
【发布时间】：2019-03-03 03:56:17
【问题描述】：

我正在使用 Angular 7 将 Angular 6 项目转换为 Ionic Framework。到目前为止，一切似乎都运行良好，但是当我多次导航到一条路线时，我发现行为有所不同。

在我的 Angular 6 项目中，组件将重新加载并再次运行 OnInit（它从后端获取新数据），而在我的新 Angular 7 中，它没有，因此数据不会被刷新。

我的控制器代码是相同的。

什么可以解释行为上的差异？

也许我无意中在这两个项目之间配置了一些不同的东西。

export class Messages implements OnInit {
    public threads;

    constructor(public nav: NavController,
                public utils: UtilsService,
                private api: ApiService) {
    }

    ngOnInit() {
        this.loadThreads();
    }

    private loadThreads() {
        this.api.getThreads().subscribe(
            (response: ApiResponse) => {
                console.log('SUCCESS: Threads retrieved: ', response.data);
                this.threads = response.data;
            },
            (error) => {
                console.error('An error occurred making the request: ' + error.message);
                this.utils.displayToastMessage('Unable to retrieve your message threads.');
            }
        );
    }
}

版本：

旧 Angular 6.1.4
新 Angular 7.2.6

【问题讨论】：

使用时的模板代码是什么，这个组件是如何使用的？

标签： angular ionic-framework ionic4

【解决方案1】：

我不知道你是如何在你的新项目中使用你的组件的，但是基本上手动注入到 DOM 中或通过路由器注入的新组件应该会触发 ngOnInit() 方法。

您可以在Stackblitz here 中看到一个快速示例，该示例演示了通过使用手动注入 FixedComponent 和由路由器注入的 DynamicComponent。打开控制台日志，您将在查看几秒钟后看到 FixedComponent ngOnDestroy() 和 ngOnInit() 方法将被调用并记录一条消息在 Stackblitz 控制台中。如果您在链接上导航并返回主页，结果相同。

Angular 组件生命周期在版本 6 和 7 之间没有变化，您可以参考 this link 查看所有组件挂钩和组件生命周期机制。

您能告诉我们“消息”是如何使用或包含在您的项目中的吗？

【讨论】：

感谢您的回答。您对生命周期在 6 到 7 之间没有变化的评论指出了我正确的方向。我发现问题出在离子方面。它提供了自己的<ion-router-outlet>，似乎是缓存组件。我会调查的。 stackoverflow.com/questions/53395620/…
我没有完全阅读中型帖子，但我认为它可以帮助你：medium.com/@paulstelzer/…

【解决方案2】：

我怀疑组件已更改而不是重新创建。所以你需要使用 ngOnChanges。

您可以在此处查看组件生命周期的文档 - https://angular.io/guide/lifecycle-hooks

【讨论】：