Angular - routerLink 和状态问题 [英] Angular - Issue with routerLink and state

问题描述

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

我怎么了?

登录页面的html

通过按钮进入主页<a routerLink="/home" [state]="navExtra.state">通过</a>进入主页

登录页数

import { Component, OnInit } from '@angular/core';从@angular/router"导入{NavigationExtras}；@成分({选择器:'应用程序登录'，templateUrl: './login.page.html',styleUrls: ['./login.page.scss']})导出类 LoginPage 实现 OnInit {navExtra: NavigationExtras = {状态:{数据:{a:'a'，b:'b'}}};构造函数(){}ngOnInit() {}}

首页的ts

import { Component, OnInit } from '@angular/core';从@angular/router"导入{路由器}；@成分({选择器:'app-home'，templateUrl: './home.page.html',styleUrls: ['./home.page.scss']})导出类 HomePage 实现 OnInit {构造函数(专用路由器:路由器) {}ngOnInit() {console.log(this.router.getCurrentNavigation().extras.state);}}

解决方案

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

当不是a标签时:

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

state 不包含在 extras 中:

@HostListener('click')onClick(): 布尔 {常量附加 = {skipLocationChange: attrBoolValue(this.skipLocationChange),replaceUrl: attrBoolValue(this.replaceUrl),};this.router.navigateByUrl(this.urlTree, extras);返回真；}

<块引用>

来源

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

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

包括:

@HostListener('click', [/** .... **/])onClick(/** .... **/): boolean {//.....常量附加 = {skipLocationChange: attrBoolValue(this.skipLocationChange),replaceUrl: attrBoolValue(this.replaceUrl),state: this.state//<<<<<<<<<<<<<<<<<<<;<<<<<<<<<这里！};this.router.navigateByUrl(this.urlTree, extras);返回假；}

<块引用>

来源

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

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

From an html page I want to route to another page using routerLink and state. With tag there's no issues, during ngOnInit in landing page, I can retrieve state as expected. Using tag home page is navigate as well but state results undefined.

What's my wrong?

html of login page

<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 of login page

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 of home page

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

解决方案

I don't think it is possible to pass state through a button. If we inspect the source code of routerLink, we can see...

when not an a tag:

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

state isn't included in extras:

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

source

whereas when we have an a tag:

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

it is included:

@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

So your option is to style that link to look like a button, or then call a function on button click which performs the navigation, like presented in other answer, here I kindly refer to that code posted by AbolfazlR:

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

这篇关于Angular - routerLink 和状态问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！