如何使用路由出口路由至离子标签?

时间:2018-10-22 09:11:13

标签: angular ionic-framework

如何路由到带有路由器插座的ion-tab? 我在goNext函数的login.page.ts中写什么? 我试过了: this.router.navigate(['/profile']);this.router.navigate(['/(profile:profile)']);

以及如何在html中路由它?

app-routing.module.ts

import { RootComponent } from './root/root.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: RootComponent, children: [
    { path: '', redirectTo: '/home', pathMatch: 'full'},
    { path: 'chat', loadChildren: './chat-list/chat-list.module#ChatListPageModule', outlet: 'chat' },
  ] },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
];

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

app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

root.component.html

<ion-tabs>
  <ion-tab label="Profiel" icon="people">
    <ion-router-outlet name="profile"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Vragen" icon="musical-note">
    <ion-router-outlet name="question"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Chat" icon="person">
    <ion-router-outlet name="chat"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

login.page.ts

goNext() {
      this.router.navigate([{ outlets: { profile: ['profile(profile:profile)'] } }]);
  }

0 个答案:

没有答案