如何制作内部子路由以获取 routerLinkActive

Question

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

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

我能做些什么来解决这个问题？

应用步骤.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