根据url动态更改内容-angular 4

Question

我有一个https://test.com/subject/21这样的网址

在页面中，我有表单字段。表单字段之一是主题代码。现在，我希望用URL中的数字动态填充主题代码。

用户可以更改网址中的数字，这应该更改页面中的内容。

<input formControlName="subject_code" value="" placeholder="Subject Code" class="form-control>

我的页面路由如下：

app.routing.module.ts

 {
    path: 'subject/:code',
    component: SubjectComponent,
    loadChildren: './subject/subject.module#SubjectModule'
  },

让我知道是否需要其他信息。谢谢！

Answer 1

使用ActivatedRoute：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'subject',
  template: `
    <input formControlName="subject_code" [(ngModel)]="code" ngplaceholder="Subject Code" class="form-control>
  `,
})
export class SubjectComponent implements OnInit, OnDestroy {
  code: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {
    this.code = 0;
  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.code = +params['code'];

       // In a real app: dispatch action to load the details here.
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}