Angular Router 復制了我的路由組件

Question

我有應用程序的屏幕截圖： https : //ibb.co/NmnSPNr和https://ibb.co/C0nwG4D info.component.ts / Info 組件其中 Item 組件的子組件，當我路由到這個時會顯示一些鏈接。

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 ** / Item 組件只獲取 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 /這是我的父組件，這里我存儲路由器插座、routerLink 並循環遍歷項目

<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>

Answer 1

您可以使用<app-info-component>並在 item 組件中添加 *ngIf 條件，而不是使用<router-outlet> 。

取而代之的是：

<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>