在Angular Ionic 4中,可以使用路由来传递变量。以下是一个使用路由传递变量的示例:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Page2Page } from './page2.page';
const routes: Routes = [
{
path: 'page2/:param',
component: Page2Page
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class Page2PageRoutingModule {}
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-page2',
templateUrl: './page2.page.html',
styleUrls: ['./page2.page.scss'],
})
export class Page2Page implements OnInit {
param: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.param = this.route.snapshot.paramMap.get('param');
}
}
{{ param }}
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-page1',
templateUrl: './page1.page.html',
styleUrls: ['./page1.page.scss'],
})
export class Page1Page implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
goToPage2() {
let param = 'Hello World';
this.router.navigate(['/page2', param]);
}
}
Go to Page 2
现在,当用户点击“Go to Page 2”按钮时,将导航到Page2Page并将参数传递给它。Page2Page将显示传递的参数。