戻るボタンはrouterlinkを使用して、目的のページにリンクしていません

Question

私は、ListListコンポーネントに接続したいEditListingComponentのhtmlに戻るボタンがあります。以下の作品私は戻って

foll ...戻るリストコンポーネント しかし

、私はID（$キー）を特定のリストに戻りたいとき、それは動作しませんに接続する場合ルートは以下のとおりです。

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> 

編集listing.component.tsファイルのコードがFOLようですこれはかもしれなぜ安値...

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]); 

    }); 


    } 

} 

あなたはplsは、いくつかの洞察を当てることができます..私は私が見る上場だっての$ keyプロパティへのアクセス権を持っているか、それは私にconsole.log

Answer 1

はして試してみてください。

を

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

文字列をパラメータと手動で連結しないようにしてください。 router navigate関数は、link parameters配列を使用して、これをそのままの状態にします。詳細はhttps://angular.io/guide/router