如何在 Angular 的输入框中显示路由器参数？答案

【问题标题】：How do I display a router parameter in an input box in Angular?如何在 Angular 的输入框中显示路由器参数？
【发布时间】：2021-09-30 01:24:05
【问题描述】：

目前，我的 Angular 项目中的路线设置如下：

const routes: Routes = [
  { path: 'defect', component: AppComponent },
  { path: 'defect/:start', component: DefectComponent }
];

然后在我的 DefectComponent 的 TS 中我有：

//route is declared in my parameters as ActivatedRoute
ngOnInit(): void {
    let temp = this.route.snapshot.paramMap.get('start');
    if(temp) {
      this.timestamp.TestStart = temp;
    }
  }

在我的 DefectComponent 的 html 中，我有：

<input id="TestStart" [(ngModel)]="timestamp.TestStart" placeholder="Time">
  <button class="findSteps" (click)="createCases(timestamp)">
    Find Failed Cases
  </button>

我认为当我使用以下网址调用它时，它会使用“start”参数自动填充我的输入：

http://localhost:4200/defect/272020-02-06_0348100661PM

因为它已添加到 timestamp.TestStart onInit，但现在它仍然只是显示“时间”。关于我做错了什么有什么想法吗？

我已经有的想法：

ngModel 是否位于 ngOnInit 之前？
我是否以某种方式将参数传递到 url 错误？

更新： temp 当前设置为 null 而不是输入。对此的任何想法将不胜感激。

【问题讨论】：

标签： angular typescript url routes ngmodel

【解决方案1】：

ngOnInit(): void {
    this.router.events.subscribe((event: any) => {
      let r = this.route;
      while(r.firstChild) {
        r = r.firstChild;
      }
      r.params.subscribe(params => {
        this.timestamp.TestStart = params.start;
      })
    })
  }

成功了！

【讨论】：

【解决方案2】：

您的路线目前需要一个“路线参数”。类似的东西

http://localhost:4200/defect/<some-value>?<query-params>

将是您的网址应该是什么样子。我相信这就是导致您的问题的原因。如果您更新您的路线并删除 /:start 或对路线执行类似 defect/start 的操作，然后添加查询参数，您应该会获得所需的行为。

【讨论】：

我将问题中的路线更新为我一直在尝试的内容，但仍然为空。有什么想法吗？

【解决方案3】：

start 是一个查询参数（出现在 URL 中的 ? 字符之后）。

所以你应该使用 queryParamMap 而不是 paramMap。

或者网址应该更像

http://localhost:4200/defect/272020-02-06_0348100661PM

无论哪种方式，它都会以字符串的形式出现，如果需要，您必须将其解析为 Date 对象。

【讨论】：

我尝试将 paramMap 更改为 queryParamMap，但它似乎不起作用（temp 仍然为空）。我也尝试过更改您提到的网址，但它仍然为空。我做错了什么吗？ ://
您设置路线的方式是常规参数，而不是查询参数。 { path: 'defect/:start', component: DefectComponent } 这将产生类似localhost:4200/defect/272020-02-06_XXX 的路由。所以我会使用 paramMap。
另外，你是在路由注入吗？您没有显示您的构造函数，因此我们无法知道。它是ActivatedRoute类型。
最后，我会使用可观察的参数而不是快照：this.route.params.subscribe(params => console.log(params));
我的 ngInit 现在看起来像他的：this.route.paramMap.subscribe((params) => { let temp = params.get('Start'); console.log(temp); }