javascript - 使用 routerlink 的后退按钮未链接到所需页面

Question

我在 EditListingComponent 的 html 中有一个后退按钮，我希望将其连接到列表组件。如果我连接到列表组件，则以下内容有效 返回

但是，当我希望返回带有 id ($key) 的特定列表时，它不起作用...返回

路线如下:

const appRoutes: Routes = [
  {path:'', component:HomeComponent},
  {path: 'listings', component:ListingsComponent},
  {path: 'listing/:id', component:ListingComponent},
  {path: 'edit-listing/:id', component:EditListingComponent},
  {path: 'add-listing', component:AddListingComponent}

]

下面是我的编辑列表组件的 html:

 <a [routerLink]="['/listing/'+listing.$key]">Back</a> <!--why does this routerlink does not work - ['/listing/'+listing.$key]-->
    <br />
    <h2 class="page-header">Edit Checklist</h2>
    <form (submit)="onEditSubmit()">
      <div class="form-group">
        <label>Checklist</label>
        <textarea class="form-control" type="text" [(ngModel)]="checklist" name="checklist" required></textarea>
      </div>
      <div class="form-group">
        <label>Notes</label>
        <textarea class="form-control" type="text" [(ngModel)]="notes" name="notes" required></textarea>
      </div>

      <input type="submit" value="submit" class="btn btn-success">
    </form>

edit-listing.component.ts文件的代码如下...

export class EditListingComponent implements OnInit {
  id:any;
  checklist:any; /*ngmodel binds the html fields to the properties in the component*/
  notes:any;
  constructor(private firebaseService: FirebaseService, private router:Router, private route:ActivatedRoute) { }

  ngOnInit() {
    // Get ID
    this.id = this.route.snapshot.params['id'];

    this.firebaseService.getListingDetails(this.id).subscribe(listing => {
      this.checklist = listing.checklist;
      this.notes = listing.notes;
      console.log(listing);     
    });
  }

  onEditSubmit(){
    let listing = {
      checklist: this.checklist,
      notes: this.notes

    }

    this.firebaseService.updateListing(this.id, listing).then(() => {

        this.router.navigate(['/listing/'+this.id]);

    });


  }

}

您能透露一下为什么会这样吗？我确实可以访问列表的 $key 属性，因为我看到它是我的 console.log

Answer 1

尝试:

this.router.navigate(['/listing',this.id]);

尽量避免手动连接字符串和参数。路由器导航功能通过使用链接参数数组来实现这一点。更多信息https://angular.io/guide/router