Невозможно получить и отобразить данные в другом компоненте

Question

Я хочу получить свое сообщение по идентификатору и отобразить его в другом компоненте с использованием угловых маршрутов. Мне удалось получить идентификатор каждого сообщения и прикрепить его к URL-адресу, но я не знаю, куда идти дальше.

Мой сервисный код:

getmaxPost(id : number): Observable<maxPost>{    
  const url = `${this.basePath}/${id}`;    
  return this.db.object<maxPost>(url)
}

Мой .ts код:

getmaxPost(): void {

  const id = +this.route.snapshot.paramMap.get('id');

  console.log("this is the", id);
  this.Service.getmaxPost(id).subscribe(fileUpload => this.fileUpload = fileUpload);
}

Мой импорт для .ts:

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { MaxPostServiceService } from '../max-post-service.service';
import { Component, OnInit, Input } from '@angular/core';

Мой импорт для обслуживания:

import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
import { maxPost } from '../max-post-model';

Answer 1

Вы должны определить маршрут таким образом.

  {
    path: 'max/home/post-details/:id',
    component: PostDetailComponent,
  },

ОБНОВЛЕНИЕ:

относительно вашей конфигурации вы должны удалить /home/ из вашего URI

{
    path: 'max',
    component: MAXComponent,
    children: [
      {
        path: 'home', component: HomeComponent,
      },
      {
        path: 'window',
        component: WindowComponent,
      },
      {
        path: 'post-details/:id', component: PostDetailsComponent,
      }
}

post-details является ребенком max, а не home

Так что вместо max/home/post-details/91210655 это должно быть max/post-details/91210655

Или измените конфигурацию маршрута, чтобы post-detaild стал дочерним элементом home

Answer 2

Первым шагом было бы проверить, правильно ли печатается ваш консольный журнал "это идентификатор". Далее я бы предложил изменить свой код внутри подписки на:

subscribe(fileUpload => {
    console.log(fileUpload);
    this.fileUpload = fileUpload;
})

Это должно пролить свет на то, где искать следующий код в вашем коде.