如何创建内部子路由以获取路由器链接活动

Question

我有一个带有标头组件的 angular 6 应用程序。该标头中的一个链接包含另外 4 个组件。这意味着当我单击该链接时，将加载第一个组件并且路由为 /steps/step-one（主页和其他页面的路由没有/steps/...步骤组件包含 4 个组件，导航带有 *ngIf .

我使用routerLinkActive向用户显示活动页面。当用户单击包含 4 个组件的链接时，他可以看到他在步骤页面上，并且 URL 中的路由/steps/step-one .但是在该页面上有一个按钮，可以导航到/steps/step-two，然后活动链接消失。

我该怎么做才能解决这个问题？

app-steps.ts：

 <app-step-one
      *ngIf="router.url === '/steps/step-one'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-one>
    <app-step-two
      *ngIf="router.url === '/steps/step-two'"
      [ngClass]="{'active': 'router.url === /steps/step-two'}"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-two>
    <app-step-three
      *ngIf="router.url === '/steps/step-three'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-step-three>
    <app-success
    *ngIf="router.url === '/steps/success'"
      ngFor="let cantinaData of cantinaDatas"
      [depositData]="cantinaData">
    </app-success>

Answer 1

欢迎来到堆栈溢出！

考虑删除上述代码并将其替换为：

<router-outlet></router-outlet>

然后显示该路由器插座中的每个组件。然后，您的组件将成为路由组件，而不是子组件。

有关详细信息，请参阅文档：https://angular.io/guide/router#router-outlet