仍然混淆路由和子 Nativescript angular
still confused Routing and child Nativescript angular
我正在使用 nativescript 4+ angular 框架。我已经完成了登录和注册组件。但现在我在使用主要组件时遇到了麻烦。
树是这样的
app
{
main,
login,
register
}
然后。主要有 canActivate
个守卫。如果用户还没有登录。用户必须先登录或创建帐户。
问题是有很多子组件的主要组件。
我的主路由是这样的
import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { MainComponent } from './main.component';
import { ProfileComponent } from './home/profile.component';
import { AddStoreComponent } from './home/add-store/add-store.component';
import { EditProfileComponent } from './home/edit-profile/edit-profile.component';
import { StoreComponent } from './store/store.component';
import { EditStoreProfileComponent } from './store/edit-store-profile/edit-store-profile.component';
import { GoodsComponent } from './store/goods/goods.component';
import { AddGoodsComponent } from './store/goods/add-goods/add-goods.component';
import { EditGoodsComponent } from './store/goods/edit-goods/edit-goods.component';
import { StaffComponent } from './store/staff/staff.component';
import { AddStaffComponent } from './store/staff/add-staff/add-staff.component';
import { EditStaffComponent } from './store/staff/edit-staff/edit-staff.component';
import { StoreProfileComponent } from './store/store-profile/store-profile.component';
import { TransactionComponent } from './store/transaction/transaction.component';
import { AddTransactionComponent } from './store/transaction/add-transaction/add-transaction.component';
const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: '/profile',
pathMatch: 'prefix'
},
{ path: 'profile', component: ProfileComponent },
{ path: 'edit-profile', component: EditProfileComponent },
{ path: 'add-store', component: AddStoreComponent },
{
path: 'store:id',
component: StoreComponent,
children: [
{
path: '',
redirectTo: '/store-profile',
pathMatch: 'full'
},
{ path: 'store-profile', component: StoreProfileComponent },
{
path: 'edit-store-profile',
component: EditStoreProfileComponent
},
{ path: 'goods', component: GoodsComponent },
{ path: 'edit-goods', component: EditGoodsComponent },
{ path: 'add-goods', component: AddGoodsComponent },
{ path: 'staff', component: StaffComponent },
{ path: 'edit-staff', component: EditStaffComponent },
{ path: 'add-staff', component: AddStaffComponent },
{ path: 'transaction', component: TransactionComponent },
{
path: 'add-transaction',
component: AddTransactionComponent
}
]
}
]
}
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class MainRoutingModule {}
我的 mainRouting 好还是不好?
我的目标是当我去 main component
时自动去 profile component
但我的代码确实有效。
我试过改变path : 'profile' to path : ''
。有用。但我需要打电话给 '/profile' route
并且我希望 route ''
成为 route '/main'
的根
如果你想让你的模式起作用,你必须在 MainComponent
上定义一个非空路径,这意味着所有子路径都显示在 MainComponent
布局中。如果您有多个布局,这很有用。但是在你的情况下,你只有一个布局,那么你可以简单地将它放在 AppComponent
中,它可以让你摆脱导致问题的空父路由
我正在使用 nativescript 4+ angular 框架。我已经完成了登录和注册组件。但现在我在使用主要组件时遇到了麻烦。
树是这样的
app
{
main,
login,
register
}
然后。主要有 canActivate
个守卫。如果用户还没有登录。用户必须先登录或创建帐户。
问题是有很多子组件的主要组件。
我的主路由是这样的
import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { MainComponent } from './main.component';
import { ProfileComponent } from './home/profile.component';
import { AddStoreComponent } from './home/add-store/add-store.component';
import { EditProfileComponent } from './home/edit-profile/edit-profile.component';
import { StoreComponent } from './store/store.component';
import { EditStoreProfileComponent } from './store/edit-store-profile/edit-store-profile.component';
import { GoodsComponent } from './store/goods/goods.component';
import { AddGoodsComponent } from './store/goods/add-goods/add-goods.component';
import { EditGoodsComponent } from './store/goods/edit-goods/edit-goods.component';
import { StaffComponent } from './store/staff/staff.component';
import { AddStaffComponent } from './store/staff/add-staff/add-staff.component';
import { EditStaffComponent } from './store/staff/edit-staff/edit-staff.component';
import { StoreProfileComponent } from './store/store-profile/store-profile.component';
import { TransactionComponent } from './store/transaction/transaction.component';
import { AddTransactionComponent } from './store/transaction/add-transaction/add-transaction.component';
const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: '/profile',
pathMatch: 'prefix'
},
{ path: 'profile', component: ProfileComponent },
{ path: 'edit-profile', component: EditProfileComponent },
{ path: 'add-store', component: AddStoreComponent },
{
path: 'store:id',
component: StoreComponent,
children: [
{
path: '',
redirectTo: '/store-profile',
pathMatch: 'full'
},
{ path: 'store-profile', component: StoreProfileComponent },
{
path: 'edit-store-profile',
component: EditStoreProfileComponent
},
{ path: 'goods', component: GoodsComponent },
{ path: 'edit-goods', component: EditGoodsComponent },
{ path: 'add-goods', component: AddGoodsComponent },
{ path: 'staff', component: StaffComponent },
{ path: 'edit-staff', component: EditStaffComponent },
{ path: 'add-staff', component: AddStaffComponent },
{ path: 'transaction', component: TransactionComponent },
{
path: 'add-transaction',
component: AddTransactionComponent
}
]
}
]
}
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class MainRoutingModule {}
我的 mainRouting 好还是不好?
我的目标是当我去 main component
时自动去 profile component
但我的代码确实有效。
我试过改变path : 'profile' to path : ''
。有用。但我需要打电话给 '/profile' route
并且我希望 route ''
成为 route '/main'
如果你想让你的模式起作用,你必须在 MainComponent
上定义一个非空路径,这意味着所有子路径都显示在 MainComponent
布局中。如果您有多个布局,这很有用。但是在你的情况下,你只有一个布局,那么你可以简单地将它放在 AppComponent
中,它可以让你摆脱导致问题的空父路由