使用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}

]

foll是我的用於編輯列表的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]);

    });


  }

}

您能否解釋一下為什么會這樣。.我確實可以訪問列表coz的$ key屬性，我可以在console.log中看到它

Answer 1

嘗試：

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

嘗試避免手動將字符串與參數連接。 路由器導航功能通過使用鏈接參數數組使此功能開箱即用。 有關更多信息， 請參見https://angular.io/guide/router