Angular 子容器辅助路由器出口 routerLink 问题

时间:2021-07-13 15:35:49

标签: angular router-outlet routerlink

我的容器页面中有一个子导航,用于激活我的组件并将其加载到我命名的路由器出口中。我的问题是我页面上的另一个使用“routerLink”的按钮。在我与子导航项交互或单击子导航项并将我的组件加载到我命名的路由器出口后,我的按钮的 routerLink 值被修改为“/project/1/(add-review//aside:aside-one)”,这会中断我的导航并被重新路由回我的主页。请参阅下面的代码。

<div class="project">
<header class="project__header">
    <h1 class="project__title">Project Page</h1>
</header>
<div class="project__content">
    <div class="project__left-column">
        <a class="project__btn-add-review"
            [routerLink]="['/project', projectId, 'add-review']"
            target="_blank">
            Add Review
        </a>
    </div>
    <div class="project__right-column">
        <app-rounded-button-container>
            <app-rounded-button displayText="Aside One"
                [isActive]="true"
                [routerLink]="[{ outlets: { aside: ['aside-one'] } }]"
                [skipLocationChange]="true">
            </app-rounded-button>
            <app-rounded-button displayText="Aside Two"
                [isActive]="false"
                [routerLink]="[{ outlets: { aside: ['aside-two'] } }]"
                [skipLocationChange]="true">
            </app-rounded-button>
        </app-rounded-button-container>
        <router-outlet name="aside"></router-outlet>
    </div>
</div>
export const PROJECT_ROUTES: Routes = [
    {
        path: ':projectId',
        component: ProjectComponent,
        data: {
            breadcrumb: [
                {
                    label: 'Project',
                    path: ['/project'],
                },
            ],
        },
        children: [
            {
                path: 'aside-one',
                pathMatch: 'full',
                outlet: 'aside',
                component: AsideRightOneComponent,
            },
            {
                path: 'aside-two',
                pathMatch: 'full',
                outlet: 'aside',
                component: AsideRightTwoComponent,
            },
        ],
    },
    {
        path: ':projectId/add-review',
        component: AddReviewComponent,
        data: { hideNavMenu: true },
    },
];

0 个答案:

没有答案