Блог

У меня есть снимки экрана приложения: https://ibb.co/NmnSPNr и https://ibb.co/C0nwG4D
info.component.ts / Информационный компонент, где дочерний компонент компонента элемента, это отображается, когда я перехожу по этой ссылке.

 export class InfoComponent implements OnInit {
  p: Post;
  paramsSubscription: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.p = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name'],
      price: this.route.snapshot.params['price'],
      place: this.route.snapshot.params['place'],
      image: this.route.snapshot.params['image'],
      date: this.route.snapshot.params['date'],
      desc: this.route.snapshot.params['desc'],
    };
 

**item.component.ts ** / Компонент элемента извлекает только HTTP-запрос и отображает элементы

 export class ItemComponent implements OnInit {
  items: any;
  searchValue: any;

  constructor(private http: HttpService) {}

  ngOnInit(): void {
    this.getAllPosts();
  }

  //GetPost's
  getAllPosts() {
    this.http.getPost().subscribe((res) => {
      this.items = res;
    });
  }
}
 

info.component.html / Это информационный компонент, в котором я храню данные из info.ts

 <div class="container">
  <div class="col-xs-12">
    <div class="imagee-div">
      <img [src]="p.image" alt="snkr1" />
    </div>
    <div class="details">
      <h3>{{ p.id }}. {{ p.name }}</h3>
      <small>release date: {{ p.date }}.</small>
      <p>Price: ${{ p.price }}</p>
      <h4>More Details:</h4>
      <p>
        {{ p.desc }}
      </p>
    </div>
  </div>
</div>
 

item.component.html / Это мой родительский компонент, здесь я храню розетку маршрутизатора, маршрутизационную ссылку и цикл над элементами

 <div class="row mx-auto">
  <div class="col-4">
    <div class="col-12 mt-3" id="main-card">
      <div class="row" id="card" *ngFor="let p of items | filter: searchValue">
        <div class="img-div">
          <img [src]="p.image" alt="" width="250px" />
        </div>
        <div class="main">
          <h4>{{ p.id }}. {{ p.name }}</h4>
          <p>Price: ${{ p.price }}</p>
          <small>{{ p.place }}</small
          ><br />
          <a
            href="#"
            [routerLink]="[
              '/item',
              p.id,
              p.name,
              p.date,
              p.desc,
              p.price,
              p.image
            ]"
          >
            <button class="btn btn-success mt-1">
              <i class="fas fa-question"></i>
            </button>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-8"><router-outlet></router-outlet></div>
</div>
 

Вместо использования <router-outlet> , вы можете использовать <app-info-component> и добавить условие *ngIf в компоненте элемента.

Вместо этого:

 <div class="col-8"><router-outlet></router-outlet></div>
 

Используйте это:

 <div class="col-8">
  <app-info-component *ngIf="p.id > 0">
  </app-info-component>
</div>
 

То же самое в информационном компоненте, которое условие добавления ngIf имеет ниже.

 <div *ngIf="p.id > 0" class="container">
  <div class="col-xs-12">
    <div class="imagee-div">
      <img [src]="p.image" alt="snkr1" />
    </div>
    <div class="details">
      <h3>{{ p.id }}. {{ p.name }}</h3>
      <small>release date: {{ p.date }}.</small>
      <p>Price: ${{ p.price }}</p>
      <h4>More Details:</h4>
      <p>
        {{ p.desc }}
      </p>
    </div>
  </div>
</div>