javascript – 历史向前/向后按钮不适用于angular 2路由器

2023年1月28日 182次阅读

历史(推送状态)前进/后退按钮不适用于角度2路由器.我已经在Chrome和Firefox中对此进行了测试.前进按钮从不工作,后退按钮仅工作2步,而UI不按后退按钮响应.

我有以下代码.

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";
}

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

编辑

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

点赞