如何在登录时将登录替换为帐户。[离子 5] -> 离子标签

Question

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

预期行为：用户单击"帐户"选项卡，用户登录，登录页面将替换为用户帐户页面。以下是预期行为的一些屏幕截图

登录之前

登录后

• 登录页.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" 
}
];

• 选项卡路由模块.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，这是不起作用的。

我是这样做的：

• 选项卡路由模块.ts

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

• 登录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

Ok找到了解决方案：

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

现在一切正常。