使用Angular 4向Jhipster添加新路线 [英] Adding new route to Jhipster using Angular 4
问题描述
我正在尝试将一个新菜单项添加到默认生成的JHipster应用程序中.顺便说一下,我正在使用Angular 4.
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.
首先,我在src/main/webapp/app下添加了一个名为user-profile的文件夹.
Firstly, I added a folder named user-profile under src/main/webapp/app.
在其中添加了index.ts,user-profile.component.html,user-profile.component.ts和user-profile.route.ts
In it, I added index.ts, user-profile.component.html, user-profile.component.ts and user-profile.route.ts
index.ts的内容
The contents of index.ts
export * from './user-profile.component';
export * from './user-profile.route';
user-profile.component.ts的内容
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;
});
}
}
user-profile.route.ts的内容
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'
}
};
user-profile.component.html的内容
The contents of user-profile.component.html
<div>Hello World!</div>
我还修改了navbar.html,使其包含带有以下routerlink的新菜单项
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.
谢谢.
推荐答案
您可能需要将路由器加载到某个地方.
You may need to load your router somewhere.
尝试执行以下操作:
- 在与用户配置文件组件相同的目录中添加一个user-profile.module.ts:
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 {}
- 在app.module.ts中,添加以下内容:
import { UserProfileModule } from './user-profile/user-profile.module';
和
imports: [
BrowserModule,
LayoutRoutingModule,
...
**UserProfileModule**
],
希望它能起作用.
这篇关于使用Angular 4向Jhipster添加新路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!