Angular4 - firebase przekazywanie ID jako parametr w URL

Question

Witam, 

Mam problem z wyświetlaniem elementów obiektu po nawigacji do jego szczegółów. Przykład: Jestem na stronie  https://example.com/posts naciskam na nazwę obiektu, która nawiguje do detail.html https://example.com/detail/a131adad . Wszystko przebiega prawidłowo, nie pokazują się żadne błędny, wyświetla restId, ale nazwy już nie. Problemem jest błędne wypisywanie w detail.html, czy może funkcja getRestId w service?  Będę wdzięczny za wszelkie uwagi. 

Korzystam z angualra 4, firebase 4.6.0 i angularfire 5.0.0-rc.3

Kod: 

app.routing.module.ts

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'},
    { path: 'detail', component: ContentComponent }
    { path: 'detail/:restId', component: RestaurantDetailComponent }

 

component.html 

<a [routerLink]="['/detail',restId]">{{ rest.data.name}} Link
    <li class="col-sm-3">
    <div class="fff">
          <div class="thumbnail">
              <a href="#"><img src="{{ rest.data.imagePath }}" style="width: 360px; height: 240px;" alt="{{ rest.data.name }}"></a>
          </div>
          <div class="caption">
              <h4>{{ rest.data.name }}</h4>
              <p>{{ rest.data.city }}</p>
                <a class="btn btn-mini" href="#">» Read More</a>
                <!-- <button class="btn btn-primary" (click)="onSelected()">Look</button> -->
            </div>
          </div>
        </li>
    </a>

componet.ts 

rests: any;

constructor(private restaurantSv: RestaurantService) {}
ngOnInit() {

this.rests = this.restaurantSv.getSnapshot();
}

detail.ts 

  rest: any;
  id: any;

  constructor(private restaurantService: RestaurantService,
              private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .subscribe(params => {
        this.id = params['restId'];
        this.rest = this.restaurantService.getRestId(this.id);
      }
      )
  }

detail.html - szczegóły 

<p>{{ restId }}</p>

<p>{{ (rest | async)?.name }}<p>

service.ts 

getSnapshot() {

return this.restaurants = this.restaurantsCol.snapshotChanges().map(actions => {

return actions.map(a => {

const data = a.payload.doc.data() as Restaurant;

const id = a.payload.doc.id;

return { id, data };

})

})

}

getRestId(restId: string) {
  this.restaurantDoc = this.afs.doc('restaurants/' + restId);
  this.restaurant = this.restaurantDoc.valueChanges();
  // console.log(restId);
}