ngOnInit 直到我导航到另一个组件后才会运行

Posted 2023-03-13

【中文标题】ngOnInit 直到我导航到另一个组件后才会运行

【英文标题】：ngOnInit doesn't run until after I navigate to another component

【发布时间】：2017-02-08 17:22:54

【问题描述】：

在我的 NativeScript 应用程序中，我将路线设置为

export const routes = [
     path: "",  component: AppComponent,
     path: "home", component: HomeComponent,
     path: "login", component: LoginComponent,
     path: "news" , component: NewsComponent
];

用户通过 firebase 登录后，用户会自动重定向到 HomeComponent。我应该提一下，我有一个从AppComponent Constuctor 触发的用户服务，它确定用户是否已经登录，然后将他们重定向到登录或主页。

我将 console.log() 分布在组件中以查看触发事件的时间，因此我可以尝试找出代码的放置位置。

import Component, OnInit from "@angular/core";
import Page from "ui/page";
import RouterExtensions from 'nativescript-angular/router';
import firebase = require("nativescript-plugin-firebase");

@Component (
    selector : "home",
    templateUrl: "./pages/home/home.html",
    styleUrls: ["./pages/home/home.css"]
)
export class HomeComponent implements OnInit 

    private router;

    constructor(page: Page, router: RouterExtensions) 

        console.log("HOME CONSTRUCTOR TRIGGERED");
        page.actionBarHidden = false;
        this.router = router;
    

    ngOnInit()
        console.log("HOME NGONIT TRIGGERED");
    

    goToNews()
        this.router.navigate(["/news"]);
    

 

在home.html 中，我有一个触发goToNews() 的按钮。当我加载应用程序时，我可以在控制台中看到HomeComponent 构造函数被触发，但我从未看到ngOnInit 被触发。奇怪的是，当我单击按钮导航到/news 时，我在控制台中看到 HomeComponent ngOnInit 触发。这是它应该工作的方式吗？

这一切都归结为“大局理解”，我试图找出当HomeComponent 被加载时放下我的逻辑的最佳位置。我读到将它放在构造函数中是一个坏主意，将它放在ngOnInit 中是理想的，但是如果ngOnInit 仅在我尝试离开组件后才被触发，我看不出这有什么意义。

请帮助我理解这一点。

更新：我在AppComponent 中的ngOnInit 中添加了一个console.log，并且在应用首次加载时会触发它。因此，一定是服务中的导航导致ngOnInit 无法在HomeComponent 中触发。

【问题讨论】：

我遇到了同样的问题：ngOnInit 和 ngAfterViewInit 仅在应用加载时被调用。任何后续导航到其他组件都不会触发这些组件中的这些方法。

@CarlosMermigas 我现在的结论是通过服务导航不会触发 ngOnInit，所以我必须将变量传回组件并在那里完成导航。

【参考方案1】：

尝试将 router.navigate() 放入单独的“区域”：

导入：

import  NgZone  from "@angular/core";

注入：

constructor(private zone: NgZone)  ... 

申请：

this.zone.run(() => 
    this.router.navigate(["/news"]);
);

找到here。