仍然混淆路由和子Nativescript angular

Question

我正在使用 nativescript 4+ 角度框架。我已经完成了登录和注册组件。但现在我在主要组件上遇到了麻烦。

树是这样的

app
{
   main,
   login,
   register
}

那么。主要有canActivate 守卫。如果用户还没有登录。用户必须先登录或创建帐户。

问题是主要组件有很多子组件。

我的 mainRouting 是这样的。

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 中，它可以让您摆脱导致问题的空父路由