0

我有一个 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>
4

1 回答 1

0

Welcome to stack overflow!

Consider removing the above code and replacing it with:

<router-outlet></router-outlet>

Then displaying each of your components within that router outlet. Your components then become routed components instead of child components.

See the docs for more information: https://angular.io/guide/router#router-outlet

于 2019-01-24T17:29:52.867 回答