标签: angular2-routing

我正在尝试使用路径和查询参数的混合导航到Angular 2中的路线.

以下是路径是路径最后一部分的示例路由:

{ path: ':foo/:bar/:baz/page', component: AComponent }

试图像这样链接使用数组:

this.router.navigate(['foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

我没有得到任何错误,从我能理解的这应该工作.

Angular 2文档(目前)以下为例:

{ path: 'hero/:id', component: HeroDetailComponent }

['/hero', hero.id] // { 15 }

谁能看到我哪里出错了？我在路由器3上.

我目前正在编写我的第一个Angular 2应用程序.我有一个OverviewComponent,它有以下简单的模板:

<div class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

当访问网址时,/我的路由器会将我重定向到我/overview,然后在路由器插座中加载地图.它<app-list>有一个可点击的项目列表,用于触发<app-detail>显示而不是应用程序组件.因此我在url中传递引用json文件的id :( /details/:id在我的路由中).

所有上述工作完全没问题.如果我现在单击其中一个列表项,则显示详细信息,但是当我选择另一个列表元素时,视图不会更改为新的详细信息.URL确实更改但内容未重新加载.如何实现DetailComponent的重新初始化？

我已升级为使用路由器弃用的新Angular 2路由器,并且某些行为已更改.

我遇到问题的页面是搜索页面.我们选择使用HashLocationStrategy.将所有搜索字词放在网址中.路线看起来像这样:

const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size/:more', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort', component: HomeComponent },
  { path: 'search/:term/:cat/:page', component: HomeComponent },
  { path: 'search/:term/:cat', component: HomeComponent },
  { path: 'search/:term', component: HomeComponent },
  { path: 'details/:accountNumber', component: DetailsComponent }
];

我知道查询字符串方法可能更适合所有这些选项,但项目要求由其他人决定......

无论如何,如果我导航到localhost/#/search/Hello使用,this.router.navigate(['/search/Hello']);那么路由器工作正常,一切都很好.在该页面上,如果我尝试this.router.navigate(['/search/World']);然后浏览器地址栏中的URL将相应更新,但组件根本不会更改.

以前我可以routerCanReuse用来表明我确实想重用搜索组件,并routerOnReuse在导航发生时重新运行搜索.我没有看到与这些相同的东西@angular/router.如何使用新的URL参数重新加载当前路由？

我正在运行Angular 2的2.0.0-rc.3版和@ angular/router的3.0.0-alpha.8版.

我刚刚升级到Angular RC 5,现在所有使用'ROUTER_DIRECTIVES'的组件都失败了'当我尝试进行单元测试时,无法解析路由器的所有参数:(？,？,？,？,？,？,？)组件.

import { inject, addProviders } from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/core/testing';
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';

import { HomeComponent } from './home.component';
import { UserService } from '../_services/user.service';

describe('Component: Home', () => {

  beforeEach(() => {
    addProviders([HomeComponent, UserService, ROUTER_DIRECTIVES, Router]);
  });  

  it('should inject the component', inject([HomeComponent, UserService, ROUTER_DIRECTIVES, Router],
    (component: HomeComponent) => {
      expect(component).toBeTruthy();
      // expect(component.currentUser.firstname).toEqual('Jan');
    }));

完整的错误日志:

     Chrome 52.0.2743 (Windows 10 0.0.0)
   Error: Can't resolve …

angular2是否支持嵌套状态/路由？例如,在视口中有2个链接,在点击特定链接时,它将显示一个视图,该视图还具有多个链接但特定于早期链接.

在这个使用JWT身份验证的exaple项目中,我们将了解如何仅允许经过身份验证的用户访问某些路由:

import { RouterConfig } from '@angular/router';
import { Home } from './home';
import { Login } from './login';
import { Signup } from './signup';
import { AuthGuard } from './common/auth.guard';

export const routes: RouterConfig = [
  { path: '',       component:  Login },
  { path: 'login',  component: Login },
  { path: 'signup', component: Signup },
  { path: 'home',   component: Home, canActivate: [AuthGuard] },
  { path: '**',     component: Login },
];

我想更进一步,并指出用户角色有什么"访问"路由 - 但我不知道如何将参数传递给canActivate AuthGuard(src).所以我想实现这样的目标(例如我有两个角色:Admin和Employee):

  { path: 'home', …

我正在尝试将懒惰路由应用到我的应用程序中.

我有一个非常大的项目,当它在路由器已弃用时,我使用了AsyncRoute,但现在它已被删除.

所以我尝试实现最新的延迟加载,但是我遇到了一个问题 RangeError:超出了最大调用堆栈大小 我做错了什么？我在指令中做了所有代码.

请看一下

EncountersModule

    import { NgModule } from '@angular/core';
    // import { CommonModule } from '@angular/common';
    /* ---------------  !System modules  --------------- */

    import { SharedModule } from 'sharedModule';   //There is  a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it
    /* ---------------  !App outer modules  --------------- */


    import { EncountersComponent } from './encounters.component';
    // import { PassCodeComponent } from '../../shared/components/passcode/passcode.component';


    @NgModule({
      imports: [ SharedModule ],
      declarations: [ EncountersComponent],
      exports: [ …

我有一个组件,我需要检测用户是否在他的浏览器中按下了按钮以导航回来.

目前我正在订阅路由器事件.

constructor(private router: Router, private activatedRoute: ActivatedRoute) {

    this.routerSubscription = router.events
        .subscribe(event => {

            // if (event.navigatesBack()) ...

        });

}

我知道我可以使用,window.onpopstate但在使用Angular2时感觉就像是黑客.

我遵循这个教程.在从api.github获取用户列表的途中我得到错误:

找不到支持对象'[object Object]'

我认为它与之相关

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

在我的代码中,因为在它之前没有任何错误,并且我不确定数据是否来自get请求,只是单击didnt没有给出任何错误,这是我的代码到目前为止

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform …

这是路由和组件的样子:

routes.config

export const routes: RouterConfig = [
   { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },   
   { path: 'users/new', component: NewUserComponent },    
];

新user.component

 addField(newName: string){
        this.items.push({ 
          name: newName,
      })
      this._router.navigate(['/users'])

Angular2应该刷新 router.navigate上的页面吗？

还有什么可以使用而不是 router.navigate来避免任何页面刷新？

这是证明: