Ion-tab и Angular Routing Multi Tenancy Ionic 4 - PullRequest
Новая
       7

Ion-tab и Angular Routing Multi Tenancy Ionic 4

0 голосов
/ 12 сентября 2018

Я пытаюсь использовать ion-tab вместе с мультитенантностью, определенной в моем веб-приложении.

Многопользовательский режим работает, но когда я перехожу на tabPage, маршрутизатор не находит мою страницу.

Я перепробовал все образцы в здесь

Возможно ли это? Или мне нужно использовать только угловой?

код:

tabs.router.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';

const routes: Routes = [
  {
    path: ':tenant',
    children: [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: '',
            redirectTo: '/tabs/(home:home)',
            pathMatch: 'full',
          },
          {
            path: 'home',
            outlet: 'home',
            component: HomePage
          }      
        ]
      }      
    ]
  }
];

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

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './login/login.page';
import { TabsPage } from './tabs/tabs.page';

const routes: Routes = [
  {
    path: ':tenant',
    children: [
      { path: '', component: LoginPage },
      { path: 'login', component: LoginPage },
      { path: 'tabs', component: TabsPage }      
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.ts 

const addPath = (urlAndQuery: string[]) => urlAndQuery[0] ? '/' + urlAndQuery[0] : '';
const addQuery = (urlAndQuery: string[]) => urlAndQuery[1] ? '?' + urlAndQuery[1] : '';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  private activeTenant: string;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });

    const tenants = ['colsimbios', 'visao'];
    const defaultTenant = AppSettings.dominio;

    this.router.events.subscribe((event: any) => {

      if(!(event instanceof NavigationStart)) return;

debugger;

      const url = event.url === '/' ? '' : event.url;
      const urlAndQuery = url.split('?');
      const pathMap = urlAndQuery[0].split('/');
      const firstPathPart = pathMap[1];
      if (tenants.includes(firstPathPart) || firstPathPart === defaultTenant) {
        if (firstPathPart !== this.activeTenant) {
          this.activeTenant = firstPathPart;
        }

      } else {
        let prefix;
        if (this.activeTenant) {
          prefix = this.activeTenant;
        } else {
          prefix = defaultTenant;
        }
        const redirectUrl = '/' + prefix + addPath(urlAndQuery) + addQuery(urlAndQuery);

        console.log(this.router.config);
        this.router.navigate([redirectUrl]);        
      } 

    });
  }
}

tabs.html 

<ion-tabs #myTabs *ngIf="carregouOsDados">
          <ion-tab *ngIf="perfil.Tipo" icon="home" label="Notícias"  href="tabs/(home:home)">
            <ion-router-outlet name="home"></ion-router-outlet>           
          </ion-tab>
</ion-tabs>

Ошибка:

Chrome

Кто-нибудь пробовал?

...