angular - 具有多个参数的默认路由正在加载组件

Question

默认路由默认不加载Tab组件。仅当我替换以下代码时它才有效

{ 路径:'选项卡/:id'， 组件:TabComponent 选项卡 }//注意:仅适用于一个参数 应用程序路由.ts

const appRoutes: Routes = [

    {
        path: '',
        component: NavMenuComponent, // nav component
        children: [
            {
                path: '',
                redirectTo: 'tab/' ,
                pathMatch: 'full'
            },
            {
                path: 'tab/:id/:title', 
                component: TabComponent // tabs
            }
        ]
    },

];

manu.copnent.html

 <ul class="list-unstyled list" *ngFor='let tab of tabs'>
            <li><a [routerLink]="['/tab',tab.LinkTabID,tab.TabName]" class="anchorLink"><i class="icon-home scolor"></i><font color="white">{{tab.TabName}}</font></a></li>



        </ul>

Answer 1

您无法导航到不存在的路由，并且路由 tab/ 不存在，只有 tab/1/foo (或您指定的任何值)用于参数)。

如果您希望能够导航到 tab/ 您需要创建这样的路线

const appRoutes: Routes = [

    {
        path: '',
        component: NavMenuComponent, // nav component
        children: [
            {
                path: '',
                redirectTo: '/tab' ,
                pathMatch: 'full'
            },
            {
                path: 'tab', 
                component: TabComponent // tabs
            }
            {
                path: 'tab/:id/:title', 
                component: TabComponent // tabs
            }
        ]
    },

];

您应该知道，从 tabs/ 导航到 tabs/1/foo TabComponent 在从 tabs/ 导航时会被销毁并重新创建 tabs/1/foo 到 tabs/2/bar TabComponent 被重用。