gpt4 book ai didi

Angular - routerLink 和状态的问题

转载 作者:行者123 更新时间:2023-12-05 00:41:54 26 4
gpt4 key购买 nike

我想从一个 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);
}
}

最佳答案

我认为不可能通过按钮传递 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);

关于Angular - routerLink 和状态的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58168236/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com