使用 Angular 4 向 Jhipster 添加新路线 [英] Adding new route to Jhipster using Angular 4

问题描述

我正在尝试向默认生成的 JHipster 应用添加一个新菜单项.顺便说一下，我正在使用 Angular 4.

我面临的问题是我总是收到以下错误.

<块引用>

错误:未捕获(承诺):错误:无法匹配任何路由.网址段:'用户资料'

以下是我添加的代码.

首先，我在 src/main/webapp/app 下添加了一个名为 user-profile 的文件夹.

在其中，我添加了 index.ts、user-profile.component.html、user-profile.component.ts 和 user-profile.route.ts

index.ts 的内容

export * from './user-profile.component';从'./user-profile.route'导出*；

user-profile.component.ts 的内容

import { Component, OnInit } from '@angular/core';从'../shared'导入{主体}；@成分({选择器:'jhi-user-profile',templateUrl: './user-profile.component.html'})导出类 UserProfileComponent 实现 OnInit {账户:账户；构造函数(私有主体:主体){}ngOnInit() {this.principal.identity().then((account) => {this.account = 帐户；});}}

user-profile.route.ts 的内容

import { Route } from '@angular/router';从 '../shared' 导入 { UserRouteAccessService };从 './' 导入 { UserProfileComponent };导出 const userProfileRoute:路由 = {路径:'用户配置文件'，组件:UserProfileComponent，数据: {当局:[]，pageTitle: 'user-profile.title'}};

user-profile.component.html 的内容

Hello World!

我还修改了 navbar.html 以包含一个带有以下路由器链接的新菜单项

routerLink="user-profile"

对此问题的任何帮助将不胜感激.

谢谢.

解决方案

您可能需要在某处加载路由器.

尝试执行以下操作:

1. 将 user-profile.module.ts 添加到与您的用户配置文件组件相同的目录中:

<预><代码>从@angular/core"导入 { NgModule, CUSTOM_ELEMENTS_SCHEMA };从 '@angular/router' 导入 { RouterModule };import { UserProfileComponent, userProfileRoute } from './';@NgModule({进口:[RouterModule.forRoot([ userProfileRoute ], { useHash: true })],声明: [用户配置文件组件，],入口组件:[],供应商: []})导出类 UserProfileModule {}

2. 在 app.module.ts 中，添加以下内容:

<预><代码>import { UserProfileModule } from './user-profile/user-profile.module';

和

<预><代码>进口:[浏览器模块，布局路由模块，...**用户配置文件模块**],

希望它有效.

I'm trying to add a new menu item to the default generated JHipster app. I'm using Angular 4 by the way.

The problem I'm facing is that I'm always getting the error below.

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user-profile'

The following are the codes I added.

Firstly, I added a folder named user-profile under src/main/webapp/app.

In it, I added index.ts, user-profile.component.html, user-profile.component.ts and user-profile.route.ts

The contents of index.ts

export * from './user-profile.component';
export * from './user-profile.route';

The contents of user-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { Principal } from '../shared';

@Component({
    selector: 'jhi-user-profile',
    templateUrl: './user-profile.component.html'
})
export class UserProfileComponent implements OnInit {
    account: Account;

    constructor(private principal: Principal) {}

    ngOnInit() {
        this.principal.identity().then((account) => {
            this.account = account;
        });
    }
}

The contents of user-profile.route.ts

import { Route } from '@angular/router';

import { UserRouteAccessService } from '../shared';
import { UserProfileComponent } from './';

export const userProfileRoute: Route = {
    path: 'user-profile',
    component: UserProfileComponent,
    data: {
        authorities: [],
        pageTitle: 'user-profile.title'
    }
}; 

The contents of user-profile.component.html

<div>Hello World!</div>

I also modified navbar.html to include a new menu item with the following routerlink

routerLink="user-profile"

Any help to this problem will be greatly appreciated.

Thanks.

解决方案

You may need to load your router somewhere.

Try perform the following:

1. Add a user-profile.module.ts in to the same directory as your user profile component:

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { RouterModule } from '@angular/router';

    import { UserProfileComponent, userProfileRoute } from './';

    @NgModule({
        imports: [
            RouterModule.forRoot([ userProfileRoute ], { useHash: true })
        ],
        declarations: [
            UserProfileComponent,
        ],
        entryComponents: [
        ],
        providers: [
        ]
    })
    export class UserProfileModule {}

2. In the app.module.ts, add the following:

    import { UserProfileModule } from './user-profile/user-profile.module';

and

    imports: [
        BrowserModule,
        LayoutRoutingModule,
        ...
        **UserProfileModule**
    ],

Hope it works.

这篇关于使用 Angular 4 向 Jhipster 添加新路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！