Angular - проблема с routerLink и состоянием - PullRequest
Новая
       46

Angular - проблема с routerLink и состоянием

1 голос
/ 30 сентября 2019

С 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>

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

Ответы [ 2 ]

2 голосов
/ 30 сентября 2019

Я не думаю, что можно пропустить state через кнопку. Если мы проверим исходный код routerLink, мы увидим ...

когда не a тег: 

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

state isnне включены в 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);
0 голосов
/ 30 сентября 2019

Вы можете перейти на нужную страницу с помощью 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.

...