typescript 可选的路由参数

Posted 2021-05-20

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

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  styleUrls: ['./departments.component.scss']
})
export class DepartmentsComponent implements OnInit {
  departments = [
    {'id': 1, 'name': 'Angular'},
    {'id': 2, 'name': 'NodeJS'},
    {'id': 3, 'name': 'MongoDB'},
    {'id': 4, 'name': 'Ruby'},
    {'id': 5, 'name': 'Bootstrap'},
  ];
  selectedId;
  constructor(private router: Router,private activated_routes: ActivatedRoute) {
  }

  ngOnInit() {
    this.activated_routes.paramMap.subscribe((params: ParamMap) => {
      const id = parseInt(params.get('id'), 10);
      this.selectedId = id;
    });
  }
  onSelect(department){
    this.router.navigate([`/departments/${department.id}`]);
  }
  isSelected(department){
    return department.id === this.selectedId;
  }

}

<div class="container">
  <form class="form-group">
    <ul class="departments">
      <li class="form-control" *ngFor="let department of departments" (click)="onSelect(department)" [class.selected]="isSelected(department)">
       <span class="badge-warning" >{{department.id}} </span>{{department.name}}
      </li>
    </ul>
  </form>
</div>

<div class="container">
  <h3>You're selected department with id={{departmentId}}</h3>
  <a  class="badge badge-primary" (click)="goPrevious()">Previous</a>
  <a  class="badge badge-danger" (click)="goNext()">Next</a>
  <div>
    <button class="btn btn-info" (click)="goToDepartments()">Back</button>
  </div>

</div>

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]);
  }
  goToDepartments() {
    const selectedId = this.departmentId ? this.departmentId : null;
    this.router.navigate(['/departments', {id: selectedId}]);

  }

}