标签: angular2-router3

我正在试验新的路由器(版本3.0.0-alpha.7),并想知道如何通过routerLink指令指定查询参数？

下面的Router.navigate()方法生成一个URL,如http:// localhost:3000/component-a？x = 1

this.router.navigate(['/component-a'], {queryParams: {x: 1}});

但是,我无法弄清楚如何使用routerLink指令执行相同的操作.像下面的模板返回解析器错误...

<a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a>

我能得到的最接近的是http:// localhost:3000/component-a; x = 1,它使用子路由的语法.

<a [routerLink]="['/component-a', {x:1}]">Component A</a>

我有一个现有的Angular2应用程序，其中通过创建AuthRouterOutletDirective扩展了的来处理登录/身份验证RouterOutlet。这样就可以轻松地componentInstruction在激活功能中使用它来检查用户是否已登录，如果没有将他们重定向到我们的登录门户（由于各种原因，我无法通过单独的应用程序对此进行控制，该应用程序具有自己的登录屏幕，然后在导航到下一个组件之前发回一个令牌，该令牌将保存在Angular2应用中。

我刚刚升级到路由器3.0.0-alpha.8，我发现这不再是一个选项，它已被创建authGuard并使用该canActivate方法处理身份验证代替（我指的是本部分）文档）。我正在努力解决的问题似乎是为仅受少量路由保护的应用程序而设计的，您可以将其添加canActivate: [AuthGuard]到需要在RouterConfig中进行身份验证的每个路由中。

我遇到的问题是每条路由都需要通过身份验证进行保护。还需要进行连续检查（除非有更好的解决方法），因为我们（同样由于部分原因，我们必须使用外部登录服务）将注销用户并清除其令牌，并且下次您导航至新路由（无论路由是什么），都应将您重定向以再次登录。我知道我可以只添加canActivate: [AuthGuard]到每条路由，但这似乎是一个疯狂而乏味的修复程序，尤其是对于具有大量路由的应用程序，所有这些都需要对用户进行身份验证才能查看。

我一直在寻找修复程序，但似乎（部分原因是由于升级是相当新的），所有资源都用于仅在一条或两条路线上实现这些AuthGuard。我一直在仔细研究源代码（具体在这里），以查看是否存在我可以扩展的另一种方法，该canActivate方法比使每个路由包括特定后卫的方法更全面或更通用，但是我似乎什么也找不到。任何关于如何最好地实现这一点的建议将不胜感激！谢谢。

我有一个确认/取消模式对话框,当用户离开路线时会弹出该对话框.我通过使用带有canDeactivate方法的后卫来做到这一点.但是我希望canDeactivate等到它返回任何东西之前从模态得到响应.

我试图通过返回一个observable来做到这一点,但它不起作用.

canDeactivate(): Observable<boolean> | boolean {
    if(this.isFormStarted()) {
        this.formService.showExitModal(true);
        return this.formService.getModalSelectionObservable();
    }
    else {
        return true;
    }
}

单击确认时没有发生任何事情,即使我在if块中执行console.log时可以看到observable工作正常

this.formService.getModalSelectionObservable().subscribe(
        value => console.log("dialog value: " + value)
    );

以下是表单服务的外观.

private modalConfirmation = new Subject<boolean>();

public setModalSelectionObservable(confirmLeave: boolean) {
    this.modalConfirmation.next(confirmLeave);
}
public getModalSelectionObservable(): Observable<boolean> {
    return this.modalConfirmation.asObservable();
}

以下是我的组件.错误点是this.router.navigate()部分.登录后,我想将用户重定向到另一个页面,类似于$state.go('dashboard').

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

import { AngularFire } from 'angularfire2';

@Component({
  templateUrl: 'app/auth/login.component.html'
})

export class LoginComponent {
  constructor(private af: AngularFire, private router: Router) { }
  onSubmit(formData) {
    if(formData.valid) {
      console.log(formData.value);
      this.af.auth.login({
        email: formData.value.email,
        password: formData.value.password
      }).then(function(success) {
        console.log(success);
        this.router.navigate(['/dashboard']);
      }).catch(function(err) {
        console.log(err);
        this.router.navigate(['/dashboard']);
      })
    }
  }
}

而且我一直收到这个错误.请赐教,我做错了什么？

我正在尝试使用 redux(ngrx) 创建一个“身份验证应用程序”，并且我正在尝试在秘密守卫中使用我的应用程序状态。在这里你可以看到我的 github：https : //github.com/tamasfoldi/ngrx-auth/tree/router 这是我的守卫的样子：

@Injectable()
export class SecretGuard implements CanActivate {
  constructor(private store: Store<AppState>, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.store.let(getLoginState())
      .map(state$ => state$.isLoggedIn)
  }
}

它返回 isLoggedIn 属性，这应该没问题，因为路由器解析了 promises 和 observable，但是当我导航到秘密部分时路由器阻止了它。以下是我的路线：

export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'auth',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent …

我试图用Angular2路由器重现我的问题,但我不能在Plunker中创建我的项目的工作副本.

这是我的尝试:https://plnkr.co/edit/1lpoYP4qlBZLuqZHW7Ft

我在index.html文件中使用了以下代码行,使路径路径与Plunker的运行环境一起使用,并使用我的''默认路径.

<script>document.write('<base href="' + document.location + '" />');</script>

为什么我还在get这个错误？

我正在使用RC5的NgModule来进行动态路由加载.

我的应用程序有两个深度级别.我有以下路线:

• 应用程序/登录
• 应用程序/仪表板/模块1
• 应用程序/仪表板/模块2
• 等等...

每个deph级别都有自己的路由器插座,所以我可以在每个级别定义自定义布局.即登录和仪表板显示在app router-outlet中,而module1和module2显示在仪表板router-outlet中.

根据需要动态加载每个路由的配置是什么？

我在Angular项目的路线中遇到一些问题，主要是子路线的第三级。在应用程序上浏览时，路线可以正常运行。（routerLink），并且在通过浏览器URL访问URL时出现问题。

我的Angular版本是2.4.0，
我正在使用进行测试ng serve。

对于具有给定结构的项目，

.
??? photos
??? posts
??? users
?   ??? detail
?   ?   ??? address
?   ?   ??? family
?   ?   ??? information
?   ?   ??? phones
?   ??? friends
?   ??? profile
??? videos

以下是代码，

// user routes
export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

//app routes
const appRoutes: Routes = [ …

我有一个小的Plunk,我正在使用Angular 2中目前可用的新的Router 3.0 alpha.它一般运行良好,但问题是,一旦我点击一个路由到'detail'的链接具有特定ID的组件,当我单击具有不同ID的其他链接时,它永远不会更改.该组件永远不会被重新实例化,因此它只会在第一次加载时显示它被传递的内容.

这是有问题的组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ContactsService } from './contacts.service';

@Component({
  selector: 'contacts-detail',
  template: `
    <h2>{{contact.name}}</h2>
  `
})
export class ContactsDetailComponent implements OnInit { 

  constructor(private contactsService: ContactsService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id);
    console.log('Fetching user', this.route.snapshot.params.id);
  }
}

以下是Plunk展示了这个问题.单击一个作者姓名,然后单击另一个作者名称以查看其不更改.

我收到此错误:

使用angular2-rc6时,没有为TermsConditions找到组件工厂.

我的路线图是这样的:

{
    path: '',
    component: TermsConditions
}

我不能因为对饼干的喜爱而弄清楚如何配置Angular 2路由器的最新版本(最终版本中的那个).我有一个相当大的Angular 2 RC5应用程序启动并运行,但在我继续前进之前需要迁移到最终版本.

在这个应用程序中,我有很多嵌套组件,根据谷歌的文档,应该组织为模块中的功能.我的应用中的典型网址如此

user/34/section/95/client/13/<feature>

但也有一些其他的,比如

user/34/settings

所以在这种情况下,settings将是一个功能模块.

我已经阅读了这些文档,这些文档相当冗长,并不急于切入追逐,只是发现这个案例根本没有涉及.我无法相信这种情况不会起作用,这似乎是一个巨大的疏忽,所以我想问题是我还没有完全理解这个路由器实际上是如何工作的 - 我感觉我是我不是唯一的一个.

我已经创建了这个plunker来说明我的观点.

在这个plunker我有2级嵌套

app -> benutzer (user) -> klient (client)

足以使问题出现.预期的结果是我可以导航到

benutzer/78/klient/56

即路由器实际上找到了该路由,此时它没有.

在我将代码移动到plunker并添加之前dashboard.component(因为我无法在plunker中轻松修改URL,所以我不得不诉诸routerLink)我实际上可以导航到

klient/56

这是不可能的.看起来在另一个模块中定义的每个路由都被添加到根目录而不是彼此重叠.

非常感谢任何帮助.