想要在角度5中的仪表板之前加载注册页面

时间:2018-03-27 19:41:15

标签: angular routing

我对角度路由不太了解。我有不同的路由模块,我想要做的是,我想在仪表板组件之前加载我的注册组件。 app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import {  UpdatepasswordComponent } from 
'./auth/updatepassword/updatepassword.component';

 // Import Containers
 import {
 FullLayoutComponent,
 SimpleLayoutComponent
  } from './containers';

 export const routes: Routes = [
 {
 path: '',
 redirectTo: 'dashboard',
 pathMatch: 'full',
 },

 { path: 'signup', component: SignupComponent },
   { path: 'signin',
 component: SigninComponent
  },

 { path: 'updatepassword',   component: UpdatepasswordComponent },

  {
path: '',
component: FullLayoutComponent,
data: {
  title: 'Home'
},
children: [
  {
    path: 'base',
    loadChildren: './views/base/base.module#BaseModule'
  },
  {
    path: 'buttons',
    loadChildren: './views/buttons/buttons.module#ButtonsModule'
  },
  {
    path: 'charts',
    loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
  },
  {
    path: 'dashboard',
    loadChildren: './views/dashboard/dashboard.module#DashboardModule'
  },
  {
    path: 'icons',
    loadChildren: './views/icons/icons.module#IconsModule'
  },
  {
    path: 'notifications',
    loadChildren: 
  './views/notifications/notifications.module#NotificationsModule'
  },
  {
    path: 'theme',
    loadChildren: './views/theme/theme.module#ThemeModule'
  },
  {
    path: 'widgets',
    loadChildren: './views/widgets/widgets.module#WidgetsModule'
  }
  ]
 },
 ];

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

基routing.module.ts

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

import { addActivityComponent } from './addActivity.component';
import { activitiesComponent } from './activities.component';

import { usersComponent } from './users.component';
import { userActivitiesComponent } from './userActivities.component';

const routes: Routes = [
{
path: '',
data: {
  title: 'Admin'
},
children: [
  {
    path: 'addActivity',
    component: addActivityComponent,
    data: {
      title: 'Add Activity'
    }
  },
  {
    path: 'activities',
    component: activitiesComponent,
    data: {
      title: 'Manage Activities'
    }
  },
 {
    path: 'users',
    component: usersComponent,
    data: {
      title: 'Users'
    }
  },

  ]
 }
];

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

导出类BaseRoutingModule {}

仪表板routing.module.ts

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

import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
{
 path: '',
component: DashboardComponent,
data: {
  title: 'Dashboard'
}
 }

];

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

在应用程序路由中,我尝试将我的空重定向到注册路径,如下所示:

 {
 path: '',
 redirectTo: 'signup',
 pathMatch: 'full',
 }

和FullLayoutComponent路径如下:

   {
path: 'dashboard',
component: FullLayoutComponent,
data: {
  title: 'Home'
},

通过这种方法,我将成功地将我的应用程序重定向到登录页面,并且在登录后,它也将转到仪表板管理页面,但问题是我的FullLayoutComponent中有2张卡片,显示在仪表板页面中,之后这样做的方法是那些卡片无法成功加载到页面中。除了将所有页面成功加载到应用程序中。

这里你会发现2张图片的不同之处 https://i.stack.imgur.com/htbDA.png

重定向到注册后

https://i.stack.imgur.com/yk2I6.png

任何帮助将不胜感激。谢谢你:)

0 个答案:

没有答案