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>