使用routerlink的後退按鈕沒有鏈接到所需的頁面

我在EditListingComponent的html中有一個後退按鈕，我想連接到列表組件。下面的作品，如果我連接到列表組件返回使用routerlink的後退按鈕沒有鏈接到所需的頁面

然而，當我想回去的具體商家與ID（$鍵），它不工作...返回

的FOLL是路線：

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

    }); 


    } 

}

你能請一些線索見解，爲什麼這可能是..我有機會獲得上市堂妹的$ key屬性我看到了我的console.log

來源

2017-06-13 Nosail

嘗試用：

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

儘量避免手動連接帶參數的字符串。路由器導航功能通過使用鏈接參數數組來實現這一功能。更多的信息在https://angular.io/guide/router

來源

2017-06-13 15:14:29

謝謝。是的工作..但即時通訊仍然好奇，爲什麼葉無法正常工作：'Back'因爲即時通訊使用列表。$鍵在其他組件沒有任何問題。 – Nosail

你是什麼意思，它不工作？你得到一個錯誤或什麼？ –

使用routerlink的後退按鈕沒有鏈接到所需的頁面

回答

相關問題