Angular 2 - 无法匹配嵌套资源的任何路由

Question

我正在使用由JHipster生成器搭建的Angular前端应用程序。它连接到由Mongo支持的微服务。我正在处理包含子对象列表的资源。就像是：

preferenceList: {
   preferences: [{name: "", type: "", setting: ""}] 
}

“Name”保证是唯一的，我正在尝试创建一个routerLink，它将生成一个弹出窗口，以便在列表视图中单击时查看该特定首选项文档。但是，我一直收到错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：'首选项'错误：无法匹配任何路由。 URL段：ApplyRedirects.noMatchError上的'preference'（vendor.dll.js：73690）

我真的不知道该怎么办。可能导致此错误的原因：

在我的HTML中，这是我如何从preference-list-detail.component.html生成按钮：

<button type="submit"
    [routerLink]="['/preference', { outlets: { popup: [preferenceList.id, 'edit', 'TSTCODE'] } } ]"
    replaceUrl="true"
    class="btn btn-primary btn-sm">
    <span class="fa fa-pencil"></span>
    <span class="hidden-md-down">Edit</span></button>

这是我的路由文件中的相关代码：

@Injectable()
export class PreferenceResolvePagingParams implements Resolve<any> {

    constructor(private paginationUtil: PaginationUtil) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const page = route.queryParams['page'] ? route.queryParams['page'] : '1';
        const sort = route.queryParams['sort'] ? route.queryParams['sort'] : 'id,asc';
        return {
            page: this.paginationUtil.parsePage(page),
            predicate: this.paginationUtil.parsePredicate(sort),
            ascending: this.paginationUtil.parseAscending(sort)
      };
    }
}

export const PreferenceRoute: Routes = [
    {
        path: 'preference',
        component: PreferenceComponent,
        resolve: {
            'pagingParams': PreferenceResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const PreferencePopupRoute: Routes = [
    {
        path: 'preference-new',
        component: PreferencePopupComponent,
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    },
    {
        path: 'preference/:id',
        component: PreferencePopupComponent,
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Preferences'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

我从一个包中的资源链接到另一个包中的不同资源（即preferenceList到首选项）。我在routerLink中尝试了一些不同的东西，包括不使用命名路由器，但无济于事。

Answer 1

我注意到你的routerLink指向“/ preference”单数。我没有在代码中看到该路径的已配置路由。

从角度文档：

第一个段名称可以前缀为/，。/或../

• 如果第一个段以/开头，则路由器将从应用程序的根目录查找路径
• 如果第一个段以./开头，或者不以斜杠开头，则路由器将查找当前激活路由的子节点。
• 如果第一个段以../开头，则路由器将上升一级。

Answer 2

由于我还是Angular的新手，我现在还不确定具体细节，但我认为这个问题与我尝试利用另一个包中定义的路径（由不同的模块使用）有关。我认为JHipster定义了这些路由，以便其他实体模块不能使用它们。

我决定在我的PreferenceList模块的路由文件中创建一个路由，并以这种方式链接到所需的组件。