Question

我正在router-outlet内部DashboardComponent工作，router-outler本身通过app.component.html中的/dashboard投放。

我想要实现的流程如下：

用户登录后，系统会将用户重定向至DashboardComponent，这将加载DashboardComponent。
mat-sidenav-container包含mat-sidenav个div个链接和一个AComponent容器，我必须在其中提供不同的组件 - BComponent，{{ 1}}，CComponent取决于mat-sidenav中点击的链接。

也就是说，路径localhost:4200/dashboard/componentA应该在AComponent的div容器中显示DashboardComponent，依此类推。

路径/dashboard应重定向到/dashboard/componentA

我正在努力弄清楚如何使用DashboardComponent在router-outlet内展示组件。

这可能吗？有没有更好的方法呢？

工作代码：https://stackblitz.com/edit/angular-qvacwn/

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';

import { AComponent } from './a/a.component';
import { BComponent } from './b/b.component';
import { CComponent } from './c/c.component';

export const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'dashboard', component: DashboardComponent, outlet: 'dashboard',
    children: [
        { path: '', component:  AComponent },
        { path: 'componentA', component:  AComponent },
        { path: 'componentB', component: BComponent },
        { path: 'componentC', component: CComponent }

      ]},

    // otherwise redirect to home
   //  { path: '**', redirectTo: '' }
];

Answer 1

你做了什么，只做了一些修改。

首先，您不需要为仪表板组件内的路由器插座指定名称。命名出口有不同的用例，您可以在这里阅读：https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

以下是您需要进行的修改

从app.routing.ts
从dashboard.component.html

删除＆＃39;信息中心/＆＃39;来自a标签dashboard.component.html中的[routerLink]。由于这些路线是当前激活路线的子路线，因此它们的路径将自动附加在仪表板之后。

//dashboard.component.html
<mat-sidenav #sidenav align="start" position="start" mode="side"  opened="true" class="example-sidenav  side-nav-style">
  <ul>
    <li>
      <a [routerLink]="['componentA']">componentA</a>
    </li>
     <li>
      <a [routerLink]="['componentB']">componentB</a>
    </li>
     <li>
      <a [routerLink]="['componentC']">componentC</a>
    </li>
  </ul>
</mat-sidenav>
<div class="content">
  <p>
    dashboard works!
  </p>
  <router-outlet></router-outlet>          
</div>

//app.routing.ts
children: [
// { path: '', component:  AComponent },
{ path: 'componentA', component:  AComponent },
{ path: 'componentB', component: BComponent },
{ path: 'componentC', component: CComponent },
{ path: '', redirectTo: 'componentA', pathMatch: 'full'}
]},

另外，请注意我在children数组中注释了第一行，并在最后将其替换为新行。使用这种方法，只要路径为空，它就会自动重定向到componentA并更改路径，而不是仅在空路径上显示componentA。

更新了代码：https://stackblitz.com/edit/angular-ah4f2u

Answer 2

你基本上有两条路线指向同一个组件。

{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent, }

您应该使用重定向来实现所需的行为。在您的dashboard.html中 - 指向子组件的链接是绝对的 - 它会在您的情况下打破导航 - 考虑使用相对链接。在这种情况下，您不需要指定路径插座的名称 - 将通过正确的路由设置开箱即用。一旦我修复了以上所有内容 - 导航开始起作用。

请参阅以下代码示例：

<强> app.routing.ts

 export const appRoutes: Routes = [
{ path: '', pathMatch: "full", redirectTo: 'dashboard' },
{
   path: 'dashboard', 
    component: DashboardComponent ,
    children: [
    { path: 'componentA', component:  AComponent },
    { path: 'componentB', component: BComponent },
    { path: 'componentC', component: CComponent }

  ]},

];

<强> dashboard.component.html

<mat-sidenav #sidenav align="start" position="start" mode="side"  opened="true" class="example-sidenav  side-nav-style">
  <ul>
    <li>
      <a [routerLink]="['./componentA']">componentA</a>
    </li>
     <li>
      <a [routerLink]="['./componentB']">componentB</a>
    </li>
     <li>
      <a [routerLink]="['./componentC']">componentC</a>
    </li>
  </ul>
</mat-sidenav>

Answer 3

我对您的路由文件和仪表板组件文件进行了一些修改。

首先，您不需要使用命名路线。其次，子路由采用父进程的初始路径，因此无需再次提供它们，您可以直接在路由器链接中指定子路由名称。

你可以在这里查看工作代码

working code

希望这能解决您的问题。

Answer 4

您只需要更改路由文件。

首先，您需要将path: ''重定向到dashboard：

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

儿童的空白路线应该重定向到componentA：

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

所以基本上你的更新路线如下：

export const appRoutes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full'  },

    { path: 'dashboard', component: DashboardComponent,
    children: [
        { path: '', redirectTo: 'componentA', pathMatch: 'full' },
        { path: 'componentA', component:  AComponent },
        { path: 'componentB', component: BComponent },
        { path: 'componentC', component: CComponent }

    ]},

    // otherwise redirect to home
    // { path: '**', redirectTo: '' }
];

我还从你的演示中分叉并创建了working demo。

如何在通过主路由器插座提供服务的组件内使用Angular路由器插座？

4 个答案: