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

我有一个这样的url

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

用户可以更改url中的数字，这将更改页面中的内容

---

如果需要其他信息，请告诉我。谢谢

使用

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();
  }
}

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从'@angular/router'导入{ActivatedRoute}；
@组成部分({
选择器：'主题'，
模板：`
为什么要投否决票？如果有人解释他们的否决票，而不是简单地给出解释，那会很有帮助
 {
    path: 'subject/:code',
    component: SubjectComponent,
    loadChildren: './subject/subject.module#SubjectModule'
  },

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();
  }
}