页面路由器和生命周期

Question

希望这是可以理解的:) 在我的应用程序中，我正在使用页面路由器插座以及Typescript和angular-js。目前，该应用程序感觉无响应，因为路由是在目标页面完全构建之后完成的。 我想在我的应用程序中进行的更改是在页面构建时启动导航，然后懒惰地启动内容。 是否有最佳实践如何做到这一点？

我尝试了从ngInint到ngAfterViewChecked的不同livecylcehooks以及其中的几个，页面路由器似乎忽略了它们，并且在完成所有操作后只有路由器。

有没有人知道如何延迟构建页面？

问候

的Torsten

Answer 1

我不是100％肯定我理解这个问题，但似乎你问的是带有Nativescript的Angular路由器。在这种情况下，您有两个选择，即您当前使用的<page-router-outlet>，这会逐页加载所有内容，创建最慢的结果，而您可以将页面结构化以使用允许的<router-outlet>您可以浏览子组件。

例如，您可能有一个工具栏组件和一个页脚组件，您不需要进行更改，因此您可能会考虑仅使用路由来更改正文。这意味着可能会加载更少的信息。我认为这是ng2组件系统的重点。

以下是组件路由器的一般示例：

import {Component} from '@angular/core';
import {nativeScriptBootstrap} from 'nativescript-angular/application';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';

import {APP_ROUTER_PROVIDERS} from "./app.routes";

@Component({
    selector: 'navigation-test',
    directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
    template: `
        <StackLayout>
            <StackLayout class="nav">
                <Button text="First" 
                    [nsRouterLink]="['/first']"></Button>
                <Button text="Second"
                    [nsRouterLink]="['/second']"></Button>
            </StackLayout>

            <router-outlet></router-outlet>
        </StackLayout>
    `
})
export class NavigationApp {
}

nativeScriptBootstrap(NavigationApp, [APP_ROUTER_PROVIDERS]);