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

Question

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

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

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

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'preference' Error: Cannot match any routes. URL Segment: 'preference' at ApplyRedirects.noMatchError (vendor.dll.js:73690)

我真的不确定如何进行。可能导致此错误的原因：

在我的 HTML 中，这是我从首选项列表生成按钮的方式-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 到 preference）。我在 routerLink 中尝试了一些不同的东西，包括不使用命名路由器，但无济于事。

Answer 1

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

来自 angular 文档：

第一个段名可以加/, ./ or ../

如果第一段以/开头，路由会从应用的根目录开始查找路由
如果第一个分段以 ./ 开头，或者不以斜线开头，路由器将转而查找当前激活路由的子级。
如果第一个网段以../开头，路由器会上一层。

Answer 2

因为我对 Angular 还是个新手，所以我还不确定具体细节，但我相信这个问题与我尝试使用另一个包中定义的路由有关（由不同的模块使用） ).我认为 JHipster 定义了这些路由，因此它们不能被其他实体模块使用。

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

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

Angular 2 - Cannot match any routes for nested resource

jhipster

routerlink

angular