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

Question

在我的 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，我看不出这有什么意义。只有在我尝试离开组件后才会触发。

请帮助我理解这一点。

更新:我在 ngOnInit 中添加了一个 console.log在 AppComponent这确实在应用程序首次加载时被触发。所以一定是服务中的导航导致了 ngOnInit不开火 HomeComponent .

Answer 1

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

进口:

import { NgZone } from "@angular/core";

注入(inject):

constructor(private zone: NgZone) { ... }

申请:

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

找到 here .