仍然混淆路由和子 Nativescript angular

Question

我正在使用 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'

的根

Answer 1

如果你想让你的模式起作用，你必须在 MainComponent 上定义一个非空路径，这意味着所有子路径都显示在 MainComponent 布局中。如果您有多个布局，这很有用。但是在你的情况下，你只有一个布局，那么你可以简单地将它放在 AppComponent 中，它可以让你摆脱导致问题的空父路由

仍然混淆路由和子 Nativescript angular

still confused Routing and child Nativescript angular

nativescript

angular2-nativescript

nativescript-angular

angular