Ionic 4 angular router + интерфейс NavigationExtras

Пример передачи данных между компонентами в Ionic 4/angular:
использование интерфейса NavigationExtras

При передаче данных в диалоговых окнах часто отсутствует родительский/детский корабль. Поэтому вы не можете передавать данные ангулярным способом (parent -> child). В Ionic 4/angular у вас есть возможность передавать данные удобно внутри маршрутизатора с помощью интерфейса NavigationExtras.

страница1 передает данные странице2

page1.ts

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

@Component({
    selector: 'page1',
    templateUrl: 'page1.html',
    styleUrls: ['page1.scss'],
})
export class Page1 {
    public data: string;
    public value: string;

    constructor(private router: Router) {
    }
    // route page2 and set params in NavigationExtras
    public routePage2() {
        const navigationExtras: NavigationExtras = {
            state: {
                data: this.data,
                value: this.value
            }
        };
        this.router.navigate(['/page2'], navigationExtras);
    }
}

Вход в полноэкранный режим Выход из полноэкранного режима

page2.ts

import {ActivatedRoute, Router} from '@angular/router';
import {Component} from '@angular/core';
@Component({
    selector: 'page2',
    templateUrl: 'page2.html',
    styleUrls: ['page2.scss'],
})
export class Page2 {
    public data: string;
    public value: string;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.queryParams.subscribe(params => {
            if (this.router.getCurrentNavigation().extras.state) {
                this.data = this.router.getCurrentNavigation().extras.state.data;
                this.value = this.router.getCurrentNavigation().extras.state.value;
            }
        });
    }
}
Войти в полноэкранный режим Выход из полноэкранного режима

см.: пункт 4
https://ngrefs.com/router/navigationextras
https://angular.io/api/router/NavigationExtras

Оцените статью
Procodings.ru
Добавить комментарий