1

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

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

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

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：“首选项”错误：无法匹配任何路由。URL 段：ApplyRedirects.noMatchError 处的“首选项”（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 到preference）。我在 routerLink 中尝试了一些不同的东西，包括不使用命名路由器，但无济于事。

4

2 回答 2

2

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

从角度文档：

第一个段名称可以在前面加上 /、./ 或 ../

  • 如果第一段以 / 开头，路由器将从应用程序的根目录查找路由
  • 如果第一段以 ./ 开头，或者不以斜杠开头，则路由器将改为查找当前激活路由的子节点。
  • 如果第一段以 ../ 开头，路由器将上升一级。
于 2017-11-30T21:34:35.313 回答
0

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

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

于 2017-12-21T13:32:50.213 回答