typescript 可选的路由参数

Posted 2021-05-20

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

@Component({
  selector: 'app-department-details',
  templateUrl: './department-details.component.html',
  styleUrls: ['./department-details.component.scss']
})
export class DepartmentDetailsComponent implements OnInit {
  departmentId;

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

  ngOnInit() {
    // const id = parseInt(this.activated_routes.snapshot.paramMap.get('id'), 10);
    // this.departmentId = id;
    this.activated_routes.paramMap.subscribe((params: ParamMap) => {
      const id = parseInt(params.get('id'), 10);
      this.departmentId = id;
    });
  }

  goPrevious() {
    const previousId = this.departmentId - 1;
    this.router.navigate(['/departments', previousId]);
  }

  goNext() {
    const nextId = this.departmentId + 1;
    this.router.navigate(['/departments', nextId]);
  }

}