Question

我正在将Angular 6项目转换为带有Angular 7的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.');
            }
        );
    }
}

版本：

旧角度6.1.4
新Angular 7.2.6

Answer 1

我不知道您如何在新项目中使用组件，但是基本上，手动将新组件注入DOM或由路由器注入将触发ngOnInit（）方法。

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

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

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

Answer 2

我怀疑组件已更改而不是重新创建。因此，您需要使用ngOnChanges。

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

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

2 个答案: