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 for edit-listing组件：

 <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

中的更多信息

使用routerlink的后退按钮不链接到所需的页面

1 个答案: