Question

我的代码有问题：

//routes
 const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'users', component: UsersComponent,
    children: [
      {path: ':userId', component: UserComponent},
      {path: ':userId/edit', component: UserEditComponent}
    ]

  },
  {path: 'jobs', component: JobsComponent, 
    children:[
      {path: ':mainNumber', component: JobComponent},
      {path: ':mainNumber/edit', component: JobEditComponent}
    ]
  }

//jobs component ts:


import { Component, OnInit, Input } from '@angular/core';
import { JobService } from '../job.service';
import { Job } from '../model/job.model';
import { UsersService } from '../users/users.service';

import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-jobs',
  templateUrl: './jobs.component.html',
  styleUrls: ['./jobs.component.css']
})
export class JobsComponent implements OnInit {

  jobs: Job[];
  constructor(private jobService: JobService, private userService: UsersService, 
              private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.jobs = this.jobService.getJobs();

    this.activatedRoute.queryParams.subscribe((queryParams: Params)=>{
      if(queryParams['userId']){
        let userId = +queryParams['userId'];  
        this.jobs = this.jobService.getJobByUser(userId);       
      }
    });
  }

  onClick(maninNumber: number){

     this.router.navigate([maninNumber], {relativeTo: this.activatedRoute});

  }
}

//jobs component html:

<div class="container">
    <div class="row">
        <div class="col-md-7">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Lp.</th>
                        <th scope="col">L. dz.</th>
                        <th scope="col">Rodzaj sprawy</th>
                        <th scope="col">Osoba prowadząca</th>
                        <th scope="col">Opis sprawy</th>
                        <th scope="col">Wnioskodawca</th>
                        <th scope="col">Status</th>
                    </tr>
                </thead>
                <tbody *ngFor="let job of jobs; let i = index;">
                    <tr clickOnRowDirective (click)="onClick(job.mainNumber)">
                        <th scope="row">{‌{ i + 1 }}</th>
                        <td>{‌{ job.caseNr }}</td>
                        <td>{‌{ job.caseType }}</td>
                        <td>{‌{ job.fullName }}</td>
                        <td>{‌{ job.what }}</td>
                        <td>{‌{ job.who }}</td>
                        <td>{‌{ job.status }}</td>            
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-5">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

//app component

<div class="container">
  <h3 class="p-3">jaobAssist</h3>
  <ul class="nav nav-tabs justify-content-left">
    <li class="nav-item">
      <a class="nav-link" 
      [routerLink]="['/']"
      routerLinkActive="active"
      [routerLinkActiveOptions]="{exact:true}">
      Menu</a>
    </li>
    <li class="nav justify-content-center">
      <a class="nav-link" 
        [routerLink]="['/users']"
        routerLinkActive="active">
        Użytkownicy</a>
    </li>
    <li class="nav justify-content-center">
      <a class="nav-link"
      [routerLink]="['/jobs']"
      routerLinkActive="active">
      Sprawy</a>
    </li>
  </ul>
  <router-outlet></router-outlet>
</div>

项目假设：

作业组件在表中显示所有作业对象。
作业对象可以通过userId参数进行过滤。在这种情况下，我将在JobsComponent中反映指定用户的所有作业（路径：/ jobs？userId = 1）。可以单击单个作业对象（表中的行），这会将导航切换到页面，例如/ jobs / 1481（通过路由器插座功能在JobComponent html中分配单个JobComponent）

这是问题。

当我在上面指定的子路径之一（例如/ jobs？userId = 1 / jobs / 1788）上时，我想回到/ jobs（通过单击nav-tabs：[routerLink] =“ ['/ jobs']“）在进入时会显示所有作业对象，重定向到/ jobs，但是我得到了包含过滤对象的JobsComponent的相同视图。

如何实现重新加载所有作业对象并对其进行dsplay功能？

提前谢谢

如何从子路由重新加载组件？

0 个答案: