历史前进/后退按钮不适用于角度2路由器

时间:2016-05-12 16:30:23

标签: javascript typescript angular angular2-routing

历史(推送状态)前进/后退按钮不适用于angular 2路由器。我已经在Chrome和Firefox中测试了这一点。前进按钮从不起作用,后退按钮仅适用于2步,而不是按照后退按钮响应。

我有以下代码。

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent }   from './hero-list.component';
import { Login }   from './login';
@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['/home']">Crisis Center</a>
      <a [routerLink]="['/login']">Login</a>
      <a [routerLink]="['/heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path: '/home', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent},
  {path : '/login' , component:Login},
  {path: '*',        component: CrisisListComponent}
])
export class AppComponent { }

login.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { LoginMobile }   from './login/login_mobile';
import { LoginEmail }   from './login/login_email';

@Component({
  template: `
    <h2>{{val}}</h2>
    <p>Login here</p>\n\
    <a [routerLink]="['/login/mobile']">Mobile</a>
    <a [routerLink]="['/login/email']">Email</a>
    <router-outlet></router-outlet>
`,
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path : '/mobile' , component:LoginMobile},
  {path : '/email' , component:LoginEmail}
])
export class Login {
    val = "kwik.Social";
}

登录/ login_email.ts

import { Component } from '@angular/core';
@Component({
  template: `
    <p>Login here</p>
    <input type="email" placeholder="Email" [(ngModel)]="email" />\n\
    <p>Your Email is {{email}} </p>
`
})
export class LoginEmail {
    email = "kwik.Social";
}

1 个答案:

答案 0 :(得分:2)

等了很久之后,我试了router by NGRX team。它还有许多其他功能,如防护,多组件,子组件和完整历史Api支持。我唯一遗漏的一件事是,历史Api本身并没有提供一种方法来获取用户在文本字段和滚动位置上输入的值,如果可用,Ajax页面可能变得更加流畅和一致。

修改

NGRX路由器现已弃用,Angular Router的灵感来自NGRX路由器并按预期工作。