标签: angular2-routing

请注意，新的候选版本 (RC) 路由器在 @Routes 装饰器中不包含“name”参数。然而，在使用 RC 路由器描述路由时，angular.io 上的文档明确提到了“名称”。这只是文档的复制/粘贴问题还是打算将“名称”参数添加回混合中？

如果“name”参数永远消失了，原因是什么？是否有任何文档可以阐明已弃用的路由器和 RC 路由器之间的差异？

(RC) 路由器示例：

@Routes([
         {path: '/crisis-center', component: CrisisListComponent}, 
         {path: '/heroes',        component: HeroListComponent},   
         {path: '/hero/:id',      component: HeroDetailComponent} 
])

（已弃用）路由器

@RouteConfig([
  {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
  {path: '/heroes',        name: 'Heroes',       component: HeroListComponent},
  {path: '/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
])

链接到提到 RC 路由器中仍然存在的“name”参数的新文档：

https://angular.io/docs/ts/latest/guide/router.html

在我的 Angular2 应用程序中，我需要将一些可选参数传递给路由。因为它们是可选的，所以我决定使用queryParams.

我使用以下代码来传递参数：

public recoverPassword() {
    this.router.navigate(
        ['/access/recover-password', 
        { queryParams: { 'email': this.model.email }} ]
    );
}

我得到这个网址：

http://localhost:4200/access/recover-password;queryParams=%5Bobject%20Object%5D

正如您所看到的，该参数完全错误。我无法解析它的目标组件。正确的网址应该是：

http://localhost:4200/access/recover-password;email=myemail@gg.com

我遵循了官方文档，但找不到可行的解决方案。

我有以下路线配置，该路线正常工作：

export const routeConfig: Routes = [
    {path: '', redirectTo: 'use-cases', pathMatch: 'full'},
    {path: 'use-cases', component: UseCasesComponent},
    {path: 'add', component: AddComponent},
    {path: '**', redirectTo: 'use-cases'},
];

如何添加路线use-cases/:id？

我已经尝试过这个：

{path: 'use-cases', component: UseCasesComponent,
    children: [
        {
            path: '/:id',
            component: UseCaseComponent,
        }
    ]
},

但这给了我错误

异常：未捕获（承诺）：[object Object]

Error: Uncaught (in promise): [object Object]
    at resolvePromise (http://localhost:3000/polyfills.bundle.js:15073:32)
    at http://localhost:3000/polyfills.bundle.js:15050:14
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:14837:27)
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:7133:42)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:14836:33)
    at Zone.run (http://localhost:3000/polyfills.bundle.js:14719:44)
    at http://localhost:3000/polyfills.bundle.js:15107:58
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:14870:36)

我正在创建 scotch.io 的angular-ui-router 教程的 ng2 版本。我能够实现页面的基本home导航about。home我能够为儿童创建导航，即list和paragraph。我被about页面困住了。我能够导航到“关于”页面，但无法在相应的商店中呈现component的子项。about这就是我正在做的：

about.component.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
    <div class="col-sm-6">
        <router-outlet name="aboutOne"></router-outlet>
        <router-outlet name="aboutTwo"></router-outlet>
    </div>
</div>

关于.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'about',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'about',
                outlet: 'aboutTwo',
                component: AboutTwoComponent …

嗯，在问这个问题之前我做了一些研究。

这是我的路

{ path: 'cart/:productIds', component: CartComponent }

我想在点击购物车时传递productIds，如下所示在AppComponent中。我可以这样做吗？

 goToCart() {
this.router.navigate(['/cart', this.productIds]);}

我正在尝试像这样在 cartcomponent 的 ngOnit 中访问这些 ProductId

this.productIds = route.snapshot.params["productIds"];

我的问题是，这是在两个组件之间传递和访问 Int 数组的有效方法吗？

我们如何维护组件之间的状态（不确定这个词是否正确，我的背景是 ASP.NET）？

我通过命名的路由器出口将参数发送到我的ChildComponent. 但是在子组件中，当我尝试访问参数时，它们是未定义的。

这是路由配置文件

{ path: 'contact-hold/:id', component: OperationComponent, outlet: 'popup' }

这是我的链接：

<a [routerLink]="['\',{outlets:{popup:['hold',1]}}]">Hold</a>

这是浏览器中的样子：

/contact-list(popup:contact-hold/1)

这是我保留的路由器插座AppComponent：

<router-outlet name="popup"></router-outlet>

我在操作组件中像这样访问此参数：

this.route.queryParams.subscribe(params=> {      
      console.log(params["id"]);
    })  

我已经解决了 stackoverflow 中的其他问题并实现了解决方案，但仍然不起作用。这段代码可能有什么问题？

我对我的网站有很多信任，所以为了建立安全的路由，我建立了下一个守卫：

export class TrustGuard implements CanActivate {
    constructor(private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return /*Check if user has the trust or not*/;
    }
}

所以，在路线中，我可以添加像 canActivate: [TrustGuard]

问题是我有太多的信任，因此我需要为每个信任建立一个守卫。所以我试图建立一个警卫工厂，以避免实施太多类似的警卫。

我的目标是找到设置路线的方式 canActivate: [FactoryTrustGuard(Trust.seeDashboard)]

有可能吗？

我有一个包含一系列组件的 Angular 5 应用程序。有些组件是其他组件的子组件，有些则不是。

我希望应用程序具有如下结构：

*/my-account/overview    // homepage
*/my-account/my-stuff
*/profile
*/non-default

我有一个 DefaultComponent ，其中包含一些通用元素，例如我希望在大多数页面上出现的站点导航（除 */非默认路由/组件外的所有内容）。

我的路由模块定义了以下路由：

export const routes: Routes = [
    { path: '', redirectTo: 'my-account', pathMatch: 'full' },       // should redirect to localhost:4200/my-account
    { path: '', component: DefaultComponent, children: [
        { path: 'my-account', children: [
            { path: '', redirectTo: 'overview', pathMatch: 'full' }, // should redirect to localhost:4200/my-account/overview
            { path: 'overview', component: OverviewComponent },      // should resolve: localhost:4200/my-account/overview
            { path: 'my-stuff', component: MyStuffComponent }        // should resolve: localhost:4200/my-account/my-stuff …

我想监听NavigationStart事件并判断它的url属性是否为/logout. 如果是这样，当我的侦听器检测到正确的NavigationStart事件时，路由器应该停止触发连续事件，例如RoutesRecognized、GuardsCheckStart、ChildActivationStart等。否则路由器应该继续路由。

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';


@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  constructor(
    private router: Router,
  ) {
    router.events.filter(event => event instanceof NavigationStart).subscribe(
      (event: NavigationStart) => {
        if (event.url == '/logout') {
          this.logout();
          // TODO stop firing successive events
        }
      }
    );
  }

  ngOnInit() { …