Angular - routerLink 和状态的问题

Posted 2023-02-22

【中文标题】Angular - routerLink 和状态的问题

【英文标题】：Angular - Issue with routerLink and state

【发布时间】：2020-01-29 18:26:51

【问题描述】：

我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。 使用标签没有问题，在登录页面中的 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>

登录页面的ts

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);
  

【问题讨论】：

嗨，我没有在您的组件 ts 文件中看到 navExtra 定义。

对不起，我不记得粘贴起始页的ts

[routerLink]="['/home']" [state]="navExtra.state"

@ErvinLlojku 同样的问题也与你提出的最后一次更正......

我在 Angular: 8.2.14 中也遇到过这个问题，似乎 [state] 指令只适用于“a”标签

【参考方案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.

【讨论】：

我知道这一点，但我正在寻找一种方法从 html 也从 标记，而不仅仅是从 标记。

@Xilo - 我尝试了很多，但没有成功（来自 Html 也来自 标签）；上面唯一的方法有效。

【参考方案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

因此，您可以选择将该链接设置为看起来像一个按钮，或者然后在单击按钮时调用一个执行导航的函数，如其他答案中所示，在这里我请参考 AbolfazlR：

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