如何在登录时用帐户替换登录名。 [离子 5] -> IonicTabs

Question

我试图在用户登录后将 LoginPage 替换为 AccountPage，将选项卡保留在底部，但是在使用 this.router.navigate(account) 后，它完全删除了选项卡。

预期行为：用户点击账户标签，用户登录，登录页面替换为用户账户页面。以下是预期行为的一些屏幕截图

Before login

After 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]);


    }

制表符。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" 
        }
    ];

制表符-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

所以我设法让它工作了。现在我只需要能够传递 id，这是行不通的。

这是我的做法：

制表符-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 
    }

现在标签的问题已经解决了，但是我无法访问id。

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

Answer 2

确定找到解决方案：

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);
    }

现在一切正常。

如何在登录时用帐户替换登录名。 [离子 5] -> IonicTabs

How to replace Login with Account on Login. [Ionic 5] -> IonicTabs

authentication

redirect

tabs

ionic5