- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
我的 Angular 路由行为有问题。刷新或输入的 url 像/user 总是将我重定向到/home。我还在 index.html 文件中设置了 。通过单击导航菜单按钮一切正常。但是一旦我尝试刷新页面(例如/register),我就会被重定向到/home。
我在 app.module.ts
上做错了什么?
它看起来像这样:
import { LanguageService } from './_services/language.service';
import { JwtStorageAdapter } from './_helpers/JwtStorageAdapter';
import { TruncatePipe } from './_helpers/truncatePipe';
import { RegisterService } from './_services/register.service';
import { UserService, AlertService, AuthenticationService, EventService, MemberService, ParticipationService } from './_services/index';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { CreateMemberComponent } from './user/members/create-member/create-member.component';
import { EditMemberComponent } from './user/members/edit-member/edit-member.component';
import { MaterializeModule } from 'angular2-materialize';
import { NavbarPublicComponent } from './navbarPublic/navbarPublic.component';
import { EventsComponent } from './user/events/events.component';
import { AuthGuard } from './_guards/index';
import { MembersComponent } from './user/members/members.component';
import { RegisterComponent } from './register/register.component';
import { AlertComponent } from './_directives/index';
import { NavbarUserComponent } from './user/navbarUser/navbarUser.component';
import { TeamsComponent } from './user/teams/teams.component';
import { AdminComponent } from './user/admin/admin.component';
import { CreateEventComponent } from './user/events/create-event/create-event.component';
import { DownloadComponent } from './download/download.component';
import { EventDetailComponent } from './user/events/event-detail/event-detail.component';
import { FooterComponent } from './footer/footer.component';
import { SocialmediconsComponent } from './footer/socialmedicons/socialmedicons.component';
import { AgbComponent } from './agb/agb.component';
import { EventsPastComponent } from './user/events/events-past/events-past.component';
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'download', component: DownloadComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'agb', component: AgbComponent },
{ path: 'user/events', component: EventsComponent, canActivate: [AuthGuard] },
{ path: 'user/members', component: MembersComponent, canActivate: [AuthGuard] },
{ path: 'user/teams', component: TeamsComponent, canActivate: [AuthGuard] },
{ path: 'user/admin', component: AdminComponent, canActivate: [AuthGuard] },
{ path: 'user/events/create', component: CreateEventComponent, canActivate: [AuthGuard] },
{ path: 'user/events/detail', component: EventDetailComponent, canActivate: [AuthGuard] },
{ path: 'user/members/create', component: CreateMemberComponent, canActivate: [AuthGuard] },
{ path: 'user/members/edit', component: EditMemberComponent, canActivate: [AuthGuard] },
{ path: 'user/events/events-past', component: EventsPastComponent, canActivate: [AuthGuard] }
//{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
declarations: [
AppComponent,
AlertComponent,
AboutComponent,
HomeComponent,
LoginComponent,
NavbarPublicComponent,
EventsComponent,
MembersComponent,
RegisterComponent,
NavbarUserComponent,
TeamsComponent,
AdminComponent,
CreateEventComponent,
TruncatePipe,
CreateMemberComponent,
EditMemberComponent,
DownloadComponent,
EventDetailComponent,
FooterComponent,
SocialmediconsComponent,
AgbComponent,
EventsPastComponent
],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
FormsModule,
HttpModule,
MaterializeModule
],
providers: [
AuthGuard,
AlertService,
AuthenticationService,
UserService,
EventService,
MemberService,
RegisterService,
ParticipationService,
JwtStorageAdapter,
LanguageService
],
bootstrap: [AppComponent]
})
export class AppModule { }
最佳答案
可能的解决方案:-
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, <---add this
{ path: 'home', component: HomeComponent }
..........
]
关于Angular 直接 url 路由总是重定向到/home,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47146797/
我正在尝试使用谷歌浏览器的 Trace Event Profiling Tool分析我正在运行的 Node.js 应用程序。选择点样本后,我可以在三种 View 之间进行选择: 自上而下(树) 自上而
对于一个可能是菜鸟的问题,我们深表歉意,但尽管在 SO 上研究了大量教程和其他问题,但仍找不到答案。 我想做的很简单:显示一个包含大量数据库存储字符串的 Android ListView。我所说的“很
我已经开始了一个新元素的工作,并决定给 Foundation 5 一个 bash,看看它是什么样的。在创建带有水平字段的表单时,我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下
我有一个 Windows 窗体用户控件,其中包含一个使用 BeginInvoke 委托(delegate)调用从单独线程更新的第 3 方图像显示控件。 在繁重的 CPU 负载下,UI 会锁定。当我附加
我有一堆严重依赖dom元素的JS代码。我目前使用的测试解决方案依赖于 Selenium ,但 AFAIK 无法正确评估 js 错误(addScript 错误不会导致您的测试失败,而 getEval 会
我正在制作一款基于滚动 2D map /图 block 的游戏。每个图 block (存储为图 block [21][11] - 每个 map 总共 231 个图 block )最多可以包含 21 个
考虑到以下情况,我是前端初学者: 某个 HTML 页面应该包含一个沉重的图像(例如 - 动画 gif),但我不想强制客户缓慢地等待它完全下载才能享受一个漂亮的页面,而是我更愿意给他看一个轻量级图像(例
我正在设计一个小软件,其中包括: 在互联网上获取资源, 一些用户交互(资源的快速编辑), 一些处理。 我想使用许多资源(它们都列在列表中)来这样做。每个都独立于其他。由于编辑部分很累,我想让用户(可能
我想比较两个理论场景。为了问题的目的,我简化了案例。但基本上它是您典型的生产者消费者场景。 (我关注的是消费者)。 我有一个很大的Queue dataQueue我必须将其传输给多个客户端。 那么让我们
我有一个二元分类问题,标签 0 和 1(少数)存在巨大不平衡。由于测试集带有标签 1 的行太少,因此我将训练测试设置为至少 70-30 或 60-40,因此仍然有重要的观察结果。由于我没有过多地衡量准
我是一名优秀的程序员,十分优秀!