Question

如何将默认设置为home/Welcome之类的路由，目前我的路由仅为http://localhost:4200/home，我希望用户将默认idName设为欢迎。

我的路线设置为：

 const marketRoutes:Routes = [
    {path:'',redirectTo:'home',pathMatch: 'full'},
    {path:'home',component:HomecontainerComponent,children:[
        {path:':idName',component:ContentdetailsComponent} // would like to have 
    default idNameset up as Welcome so that details page would have initial 
    value Welcome
    ]},
    { path: '**', redirectTo: 'home' } 
];

我的ContentdetailsComponent html为：

<div class="content-placeholder">
    <div class="content-description">
        <span class="content-heading">Markets Portal</span>
        <span class="content-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
    </div>
    <div class="content-dyna-category">
        <div class="content-category-list">
            <div class="content-categorylist-homeitem" [routerLink]="['Welcome']" routerLinkActive="active"><i class="fa fa-home catrgory-home" aria-hidden="true"></i></div>
            <div class="content-categorylist-subitem"  [routerLink]="['Insights']" >Insights</div>
            <div class="content-categorylist-subitem" [routerLink]="['Enablement']" >Enablement To Win</div>
            <div class="content-categorylist-subitem" [routerLink]="['Account']">Account Best Practices</div>
            <div class="content-categorylist-subitem" [routerLink]="['Best']" >Account Best Practices</div>
            <div class="content-categorylist-subitem" [routerLink]="['Practices']">Account Best Practices</div>
            <div class="content-categorylist-subitem" [routerLink]="['test']" >Account Best Practices</div>
        </div>
        <div class="content-detail-list">
            <router-outlet></router-outlet>

        </div>
    </div>
    <app-whatsnewcontent></app-whatsnewcontent>
</div>

Answer 1

你可以尝试这个解决方案

我在stackblitz

上创建了演示

const marketRoutes:Routes = [
    {path:'',redirectTo:'home',pathMatch: 'full'},
    {path:'home',component:HomeComponent,
      children:[

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

          { path: 'welcome', component:ContentdetailsComponent }
      ]
    },
    { path: '**', redirectTo: 'home' } 
];

Answer 2

试试这段代码：

在children数组中添加另一个路径路径

{path:'', redirectTo:'welcome', pathMatch: 'full'}将其重定向到home/welcome

const marketRoutes:Routes = [
    {path:'',redirectTo:'home',pathMatch: 'full'},
    {path:'home', component:HomecontainerComponent,children:[
        {path:'', redirectTo:'welcome', pathMatch: 'full'}      // Redirects to home/welcome
        {path:':idName',component:ContentdetailsComponent}
    ]},
    { path: '**', redirectTo: 'home' } 
];

如何在Angular 4中设置默认用户idName？

2 个答案: