在我们的应用程序中，我们测试用户是否同意使用条款，然后再授予他访问请求表单的权限。
我设置了一个 CanActivate 警卫检查它。如果它是错误的，我会遇到一个奇怪的行为：我可以在很短的时间内（眨眼！）看到请求表单，然后才真正重定向到条款。如果警卫是假的，我如何防止这种行为并直接重定向。
守卫不是应该在激活守卫路线之前完成他们的检查吗？
这是我的路由：
import { Routes } from '@angular/router';
import { RequestFormComponent} from './request-form.component';
import { TermsComponent } from './terms.component';
import { TermsGuard } from './services/terms-guard.service';
export const secretRoutes: Routes = [
{
path: '',
redirectTo: 'form'
},
{
path: 'form',
component: RequestFormComponent,
canActivate: [TermsGuard ]
},
{ path: 'terms', component: TermsComponent },
// otherwise redirect to form
{ path: '**', redirectTo: 'form' }
];
根据同一个问题，有没有办法在这个数组中定义默认路由？为了避免写两行：
{
path: '',
redirectTo: 'form'
},
{
path: 'form', …我正在尝试在新的 Angular2 应用程序中实现过滤机制，这将允许我过滤数组中的条目列表。这些条目可能有大约 20 个可以过滤的属性。到目前为止，我已经在一个组件中创建了一个过滤器列表，然后创建了一个作为子组件路由到的列表组件。然后我计划通过路由器将过滤器作为 queryParams 传递。从只有一个过滤器开始这很好：
在发送端我有：
this.router.navigate(['/findlist'], {queryParams: {'g': myParam}});
在接收端，我有：
this.subscription = this.route.queryParams.subscribe(
(queryParam: any) => this.myFilter = queryParam['g']
);
然后我将 myFilter 传递给过滤器管道以进行匹配和过滤。到目前为止一切正常。
但是，我不知道如何扩展它以允许多个潜在的参数，其中大部分是空白/不需要的。
我可以想象我需要通过 queryParam 定义一个包含所有活动过滤器的数组，但我能找到的唯一文档，只显示只传递一个参数的示例。我试过玩弄：
{queryParams: { pass an array here! }}
但是如果我在 key:value 对以外的地方放了任何东西，我的 IDE 就会注册一个错误。
我可能每次都可以添加所有可能的过滤器及其值，但是每次都会创建一个非常长的 URL 字符串，大多数值为空白或 All 等，不是很漂亮。
所以我认为我的工作流程应该是在发送端我维护一个包含所有过滤器及其状态的数组，然后每次点击一个过滤器按钮时，我首先更新数组中的相关值，然后传递整个数组通过查询参数。
在接收端，我必须以某种方式接收和处理 Param 作为数组，然后将每个条目提取为变量，然后在过滤器中进行处理。我也想要 DRY，所以真的不希望接收端的几个语句有效地为不同的属性做同样的事情，简单地说，循环遍历数组更有意义。
我希望这是有道理的，如果有人提出建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我目前正在查看是否可以通过创建单独的过滤器服务并使用 @Input 传递数据来传递数据。
感谢收到任何想法（自学的业余爱好者，所以可能会遗漏一些明显的东西！）
谢谢
托尼
typescript angular2-routing angular2-services angular2-router angular
我想知道是否有可能有 2 条不同的路线指向 1 个单个组件？例如：
{ path: 'signin', component: SignInComponent },
{ path: 'tenant/:id/signin', component: SignInComponent }
我问是因为我有一些有线行为..
试图在我的 angular2 应用程序中创建我的重定向路由。
但我的问题是，当有人输入像“nopath”这样的无效路径时，用户会被重定向到“HomeComponent”，但 url 仍然保留“/#/nopath”
我也希望 redirectTo 路由更改 url！我应该如何实现这一目标？
我应该在我的 HomeComponent 构造函数中放置一个 if 来检查当前 url 并将他的路由更改为 homecomponent 吗？还是我遗漏了什么？
路线：
const routes: Routes = [
{ path: '', pathMatch: 'full', component: HomeComponent },
{ path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
{ path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
{ path: 'users', component: UserComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: '' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});
编辑：
试过了，但我没有重定向到 home 组件
const routes: Routes = …我想知道是否可以在运行时动态附加子路由，比如说服务......？
鉴于：
const routes: Routes = [
{
path: '', component: GloriousComponent,
children: [
{ path: 'path1', component: Child1Component },
{ path: 'path2', component: Child2Component },
{ path: 'path3', component: Child3Component },
]
}
];
我可以删除“ ”路径的子项并以某种方式获取对 const 路由的引用，然后稍后将子项动态附加到“ ”路径？
类似的东西...
const routes: Routes = [
{
path: '', component: GloriousComponent
}
];
routes[''].appendChildren(
[
{ path: 'path1', component: Child1Component },
{ path: 'path2', component: Child2Component },
{ path: 'path3', component: Child3Component },
]
)
我是 angular2 (2.4.2) 的新手，我正在尝试像这样动态地创建多个路由器出口：
示例代码-
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<div *ngFor="let number of numbers">{{number}}</div>
<div *ngFor="let number of numbers">
<router-outlet name="{{number}}"></router-outlet>
</div>
<router-outlet></router-outlet>
`,
})
export class AppComponent {
name = 'Angular';
numbers:any;
constructor(){
this.numbers = [0,1,2,3,4];
}
}
但是我在以下内容中遇到了路由器插座的这个错误*ngFor：
Unhandled Promise rejection: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is …我目前正在使用自定义模块进行 Angular2 项目，以保持代码干净。一切都很好，直到我将此模块复制到另一个项目中。
自从我将模块复制到另一个项目后，我收到以下错误：Uncaught TypeError: Cannot read property 'visitExpression' of undefined.
经过数小时的谷歌搜索，我发现了几个可能的原因，我都测试过（但没有奏效）：
以下是我尝试过的其他一些事情：
我对下一步该尝试什么不太了解，有什么建议吗？
我有一个简单的解析器，用于如下路线/orders/first：
resolve(): Promise<Order> {
return this.orderService.get()
.then((response) => response.order)
.catch(error => Promise.reject(error));
}
我还有一个重定向到错误页面的错误处理程序：
this.router.navigate(['/error'], { skipLocationChange: true });
我希望 URL 是/orders/first这样，如果用户刷新他可能能够查看该页面。这也会使后退按钮返回到不正确的页面（上一页）
问题是解析器在路由激活之前运行，因此 URL 不会更改。
有没有办法做到这一点？
编辑：找到这个解决方法：
NavigationStart并将路由保存到变量this.location.go(nextRoute.url);skipLocationChange设置为 true我正在尝试在 Angular 2 中实现路由，这些是我的文件
app.module.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {HomeComponent} from "./home.component";
import {RentedHomeComponent} from "./rented-home";
import {TenantComponent} from "./tenant.component";
import {SubTenantComponent} from "./sub-tenant.component";
import {BreadcrumbService} from "./breadcrumb.service";
import {routes, routingProviders} from "./app.routes";
import {RouterModule} from "@angular/router";
import {BreadcrumbComponent} from "./breadcrumb.component";
import {APP_BASE_HREF} from "@angular/common";
@Component({
selector: 'my-app',
template: `
<h1 class="title">This is the landing page and no Breadcrumb here</h1>
<a routerLink="/rented-home" class="btn btn-md btn-primary">View Customer Detail</a>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
<div …我可以从 angular 应用程序中访问以下路径（通过单击具有 routerLink 的产品链接）：
{basePath}/product/trek-monda-slr-frameset-(h2-fit)-2016
但是，一旦我刷新页面 angular 就会在控制台中引发错误并且不会提供页面：
Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'h2-fit'
我的猜测是角度路由器不允许括号。但是对于大多数浏览器来说，url 中的括号不是有效字符吗？
为什么 Angular 不允许这样做？