如何在 Ionic Page 中定义可选的段参数？答案

【问题标题】：How to define optional segment parameter in Ionic Page?如何在 Ionic Page 中定义可选的段参数？
【发布时间】：2018-05-08 18:34:27
【问题描述】：

如何在 Ionic 3 PWA 中定义可选参数？

我当前的 @IonicPage 装饰器看起来像：

@IonicPage({
    segment: "landing/:id"
})

但id 参数必须是可选的。如果我没有通过id，我会收到这个错误：

未捕获（承诺）：要插入的无效视图

怎么做？
提前致谢！

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

目前还没有方法。不需要的时候需要发送空字符串。这就是现在的解决方法。

 this.navCtrl.push('landing', {
      'id': ''
    })

【讨论】：

如何在模板中做到这一点？
有一个问题，该路径有效，但是当您刷新页面时 - 出现 Error: Can't resolve all parameters for myPage: (?, ?, [object Object] 错误

【解决方案2】：

自从 Ionic 4 with Angular：一种解决方案是不同路径的解析，这里在 URL 中有两个可选的 id：

{ path: 'landing', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)},
{ path: 'landing/:id1', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)},
{ path: 'landing/:id1/:id2', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)}

总是同一个目标。魔法将始于组件：

import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: "landing",
  templateUrl: "./landing.page.html",
  styleUrls: ["./landing.page.scss"]
})
export class landingPage implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    let id1= this.route.snapshot.paramMap.get("id1");
    let id2= this.route.snapshot.paramMap.get("id2");

    // Test    
    if (id1) console.log(id1);
    if (id2) console.log(id2);
  }
}

从一页到另一页：

this.router.navigateByUrl('/landing');
this.router.navigateByUrl('/landing/' + '123');
this.router.navigateByUrl('/landing/' + '123/333');

顺序很重要，在第一条路径上留下斜杠也很重要。

【讨论】：