Как заменить логин на аккаунт на логин. [Ioni c 5] -> IonicTabs

Question

Я пытаюсь заменить LoginPage на AccountPage после входа в систему, оставляя вкладки внизу, однако после использования this.router.navigate (account) полностью удаляет вкладки.

Ожидаемое поведение: пользователь нажимает на вкладку учетной записи, пользователь входит в систему, страница входа заменяется страницей учетной записи пользователя. Ниже приведены некоторые скриншоты ожидаемого поведения

До входа в систему

После входа в систему

• login-page.ts

    login() {
        if (this.loginForm.valid) {
            this.loadingService.show();
            this.userService.login(this.loginForm.value).subscribe(
                (data: any) => {
                    this.loadingService.hide();
                    if (data.status === "success") {
                        let user = data.data;
                        this.storageService.setUser(user);
                        this.events.publish("user:logged", user);
                        this.openUserAccount(user.id, user);
                    } else {
                        this.alertService.present(data.message, data.status);
                        console.log(data.message, data.status )
                    }
                },
                () => {
                    this.loadingService.hide();
                    this.toastService.showGenericError();
                }
            );
        }
    }

    openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
        this.router.navigate(["/account", id]);


    }

• tabs.page.ts

tabs: any[] = [
        {
            name: "novelties",
            icon: "icon-novelties"
        },
        { 
            name: "pratos",
            icon: "icon-menus" },
        { 
            name: "account",
            icon: "icon-user" 
        },
        {
            name: "stores",
            icon: "icon-stores"
        },
        { 
            name: "about",
            icon: "icon-qrcode" 
        }
    ];

• tabs-routing.module.ts

const routes: Routes = [
    {
        path: "tabs",
        component: TabsPage,
        children: [
            {
                path: "novelties",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/novelties/novelties.module").then(m => m.NoveltiesPageModule)
                    }
                ]
            },
            {
                path: "pratos",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/pratos/pratos.module").then(m => m.PratosPageModule)
                    }
                ]
            },
            {
                path: "account",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/login/login.module").then(m => m.LoginPageModule)
                    }
                ]
            },
            {
                path: "stores",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/stores/stores.module").then(m => m.StoresPageModule)
                    }
                ]
            },
            {
                path: "about",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/about/about.module").then(m => m.AboutPageModule)
                    }
                ]
            },
            {
                path: "",
                redirectTo: "/tabs/novelties",
                pathMatch: "full"
            }
        ]
    },
    {
        path: "",
        redirectTo: "/tabs/novelties",
        pathMatch: "full"
    }
];

Answer 1

ОК нашел решение:

• account.page.ts

// -----------BEFORE

    ngOnInit() {
    console.log(this.route.snapshot.parent.data["user"]); <-- I'm certain the problem       is here..
        if (this.route.snapshot.parent.data["user"]) {
            this.user = this.route.snapshot.data["user"];
            console.log(this.user);
    }
    console.log(this.user);
    }
}


// -----------AFTER

    ngOnInit() {
    this.id = this.route.snapshot.paramMap.get("id");
        this.user = this.dataService.getData( this.id);

    console.log(    this.user);
    }

Теперь все работает.

Answer 2

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

Вот как я это сделал:

• tabs-routing.module.ts

//----- ADDED THIS PATH
{
                path: "login/account/:id",
                children: [
                    {
                        path: "",
                        loadChildren: () => import("@pages/account/account.module").then(m => m.AccountPageModule)
                    }
                ]
            },

• login.page.ts

 openUserAccount(id: string, user: User){
        this.dataService.setData(id, user);
       ///// this.router.navigate(["/account", id]); <-- REMOVED THIS LINE
        this.router.navigate(['tabs/login/account', id]); <-- REPLACED WITH 
    }

Теперь проблема с вкладкой решена, однако я не могу получить доступ к идентификатору.

• account.page.ts

    ngOnInit() {
    console.log(this.route.snapshot.parent.data["user"]); <-- I'm certain the problem is here..
        if (this.route.snapshot.parent.data["user"]) {
            this.user = this.route.snapshot.data["user"];
            console.log(this.user);
    }
    console.log(this.user);
    }
}

Как я могу получить доступ к id