Angular

Question

我想从 html 页面使用 routerLink 和状态路由到另一个页面。使用标签没有问题，在着陆页的 ngOnInit 期间，我可以按预期检索状态。使用标签主页也可以导航，但状态结果未定义。

我怎么了？

登录页面

html

<button routerLink="/home" [state]="navExtra.state">
    Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go Home Page via a</a>

登录页面

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  navExtra: NavigationExtras = {
    state: { data: { a: 'a', b: 'b' } }
  };
  constructor() {}

  ngOnInit() {}
}

首页ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss']
})
export class HomePage implements OnInit {
  constructor(
    private router: Router
  ) {}

  ngOnInit() {
    console.log(this.router.getCurrentNavigation().extras.state);
  }
}

Answer 1

您可以使用 click event 导航到您想要的页面并设置状态：

<button (click)="test()">Test</button>

你的组件中的测试方法：

test(){
  const navigationExtras: NavigationExtras = {state: {example: 'This is an example'}};
  this.router.navigate(['test'], navigationExtras);
}

在目标中，您可以检索如下数据：

example:string;
constructor(private router: Router) { 
   const navigation = this.router.getCurrentNavigation();
   const state = navigation.extras.state as {example: string};
   this.example = state.example;
}

Stackblitz Here.

Answer 2

我认为不可能通过按钮传递 state。如果我们检查 routerLink 的源代码，我们可以看到...

当不是 a 标签时：

@Directive({selector: ':not(a):not(area)[routerLink]'})

state 未包含在 extras 中：

@HostListener('click')
onClick(): boolean {
  const extras = {
    skipLocationChange: attrBoolValue(this.skipLocationChange),
    replaceUrl: attrBoolValue(this.replaceUrl),
  };
  this.router.navigateByUrl(this.urlTree, extras);
  return true;
}

source

而当我们有一个 a 标签时：

@Directive({selector: 'a[routerLink],area[routerLink]'})

包含：

@HostListener('click', [/** .... **/])
onClick(/** .... **/): boolean {
  // .....
  const extras = {
    skipLocationChange: attrBoolValue(this.skipLocationChange),
    replaceUrl: attrBoolValue(this.replaceUrl),
    state: this.state // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< here!
  };
  this.router.navigateByUrl(this.urlTree, extras);
  return false;
}

source

所以你的选择是将 link 的样式设置为看起来像一个按钮，或者然后在单击按钮时调用一个函数来执行导航，就像其他答案中介绍的那样，我在这里请参考发布的代码通过 AbolfazlR:

this.router.navigate(['home'], this.navExtra);

Angular - routerLink 和状态问题

Angular - Issue with routerLink and state

angular-routing

routerlink

angular-routerlink