Как реализовать отложенную загрузку в tabview в дочернем маршруте? - PullRequest
0 голосов
/ 07 июля 2019

У меня есть приложение Nativescript Angular, которое использует Tabview в дочернем маршруте.Мое приложение застревает на маршруте по умолчанию (LoadScreenComponent).Моя консоль не показывает ошибок, но каким-то образом вкладка не загружается.

Я пытался заменить лениво загруженные модули обычными компонентами, но это не имеет значения.

app-routing.module

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { LoadScreenComponent } from "./components/load-screen/load-screen.component";
import { AuthComponent } from "./components/auth/auth/auth.component";
import { NoInternetComponent } from "./components/no-internet/no-internet.component";
import { NativeScriptRouterModule, NSEmptyOutletComponent } from "nativescript-angular";

const routes: Routes = [
    {path: "", component: LoadScreenComponent},
    {path: "auth", component: AuthComponent},
    {path: "no-internet", component: NoInternetComponent},
    {
        path: "app",
        loadChildren: "~/app/components/nav/bottom-nav/bottom-nav.module#BottomNavModule"
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

bottom-nav-routing.module

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { BottomNavComponent } from "./bottom-nav.component";
import { HomeComponent } from "../../home/home.component";
import { ProfileComponent } from "../../profile/profile.component";
import { ScheduleComponent } from "../../schedule/schedule.component";
import { HoursComponent } from "../../hours/hours.component";

const routes: Routes = [
    {
        path: "",
        component: BottomNavComponent,
        redirectTo: "/(home:home/default//schedule:schedule//hours:hours//profile:profile)",
        pathMatch: "full"
    },
    {
        path: "home",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/components/home/home.module#HomeModule",
        outlet: "home"
    },
    {
        path: "schedule",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/components/schedule/schedule.module#ScheduleModule",
        outlet: "schedule"
    },
    {
        path: "hours",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/components/hours/hours.module#HoursModule",
        outlet: "hours"
    },
    {
        path: "profile",
        component: NSEmptyOutletComponent,
        loadChildren: "~/app/components/profile/profile-page.module#ProfilePageModule",
        outlet: "profile"
    }

];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class BottomNavRoutingModule { }

app.component

import { Component, OnInit, ViewContainerRef, OnChanges } from "@angular/core";
import { isAndroid, device } from "tns-core-modules/platform";
import { Router } from "@angular/router";
import { TimeService } from "./shared/services/time.service";
import { ScheduleService } from "./shared/services/schedule.service";
import { UserService } from "./shared/services/user.service";
import { SecureStorage } from "nativescript-secure-storage";
import { AuthService } from "./shared/services/auth/auth.service";
import { RouterExtensions } from "nativescript-angular";
import { RestaurantService } from "~/app/shared/services/restaurant.service";
import { ScorebordService } from "~/app/shared/services/scorebord.service";
import { UserShiftsService } from "~/app/shared/services/user-shifts.service";

const firebase = require("nativescript-plugin-firebase");
import { messaging, Message } from "nativescript-plugin-firebase/messaging";

import { displayedEvent, exitEvent, launchEvent, lowMemoryEvent,
        orientationChangedEvent, resumeEvent, suspendEvent, uncaughtErrorEvent,
        ApplicationEventData, LaunchEventData, OrientationChangedEventData, UnhandledErrorEventData,
        on as applicationOn, run as applicationRun } from "tns-core-modules/application";
import { FetchDataService } from "./shared/services/fetch-data.service";
import { Page } from "tns-core-modules/ui/page/page";

@Component({
    selector: "ns-app",
    moduleId: module.id,
    templateUrl: "./app.component.html",
    styleUrls: ["app.component.css"]
})
export class AppComponent implements OnInit {

    firstRun: boolean = true;

    secureStorage = new SecureStorage();

    constructor(
                private routerExtension: RouterExtensions,
                private scheduleService: ScheduleService,
                private userService: UserService,
                private authService: AuthService,
                private restaurantService: RestaurantService,
                private fetchDataService: FetchDataService,
                private page: Page
                ) {
                    applicationOn(uncaughtErrorEvent, function (args) {
                        if (args.ios) {
                            console.log("Stacktrace: " + args.ios.stack);
                        }
                    });
                }

    ngOnInit(): void {

        firebase.init({
            showNotifications: true,
            showNotificationsWhenInForeground: false,
            onMessageReceivedCallback(message) {
                // Iets doen met mogelijke data in push
            }
          }).then(
            () => {
              console.log("firebase.init done");

              this.secureStorage.get({
                    key: "creds"
                }).then((res) => {
                    if (res) {
                        const creds = JSON.parse(res);
                        this.authService.authUser(creds.email, creds.password).then((res) => {
                            console.log("Ingelogd");

                            this.userService.setUser(res);
                            this.userService.loggedOn = true;
                            this.restaurantService.setRestaurant(res);

                            this.fetchDataService.fetchData().then((res) => {
                                this.routerExtension.navigate(["app"], {clearHistory: true});
                            }).catch(() => {
                                this.routerExtension.navigate(["no-internet"], {clearHistory: true});
                            });
                        }).catch(() => {
                            this.routerExtension.navigate(["no-internet"], {clearHistory: true});
                        });
                    } else {
                        this.routerExtension.navigate(["auth"], {clearHistory: true});
                    }
                });

            },
            (error) => {
              console.log(`firebase.init error: ${error}`);
            }
          );

        applicationOn(resumeEvent, (args: ApplicationEventData) => {
            if (args.android) {
                // For Android applications, args.android is an android activity class.
                console.log("Activity: " + args.android);
            } else if (args.ios) {
                if (this.firstRun) {
                    this.firstRun = false;
                } else if (this.userService.loggedOn) {
                    this.scheduleService.updateShifts();
                }
            }
        });

    }

    getIconSource(icon: string): string {
        const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

        return iconPrefix + icon;
    }
}

Я думаю, что я делаю что-то не так в части redirectTo, но, к сожалению, я не могу понять этоя.

...