0

このコンテンツ出血の問題があります。ルート パラメータをサブスクライブしながら、製品 ID を取得するページにルーティングしています。

初期ロードでは問題なく動作しますが、ルート パラメータが更新されると、製品の新しいコンテンツが古いコンテンツの上にロードされます。競合が発生するため、コンテンツが互いに混ざり合うことは望ましくありません。

PRODUCT.COMPONENT.TS
...
constructor(
  private authService: AuthService,
  private route: ActivatedRoute,
  private router: Router,
  private httpService: HttpService
) { }

ngOnInit() {
  this.route.params
    .subscribe(params => {
      const id = +params['id'];
      this.loadProduct(id);
      console.log(`Current param ID is: ${id}`);
    });
}

loadProduct(prod_id: number) {
  this.httpService.getProduct(prod_id)
    .subscribe((prod: any) => {
      this.prod = prod.data[0];
      console.log(this.prod);
      this.processProduct();
    });
}
...

APP.COMPONENT.HTML

<div fxLayout="column" fxFlex="100%">

  <afn-navbar fxFlex="7%"></afn-navbar>

  <div fxLayout="row" fxFlex="88%">
    <afn-sidebar fxLayout="column" fxFlex="10%"></afn-sidebar>

    <div fxLayout="column" fxFlex="90%">
      <router-outlet></router-outlet>
    </div>

  </div>

  <afn-footer fxFlex="5%"></afn-footer>

</div>

ROUTE CONFIGURATIONS

const routes: Routes = [
  { path: 'lt/dashboard', canActivate: [ AuthGuard ], component: DashboardComponent },
  { path: 'lt/product/:id', canActivate: [ AuthGuard ], component: ProductComponent }
];

発見

コンテンツ ブリーディングが発生した領域は、入力ソースの配列構造にプロパティ バインドされたセレクター タグである埋め込み/子コンポーネントであることに気付きました。新しいコンテンツで上書きされるのではなく、配列が追加されていると思われます。したがって、情報の重複。

例えば：

<app-stops class="card-spacer" [stops]="prod.delivery.stops">Stops are loading...</app-stops>

STOPS.COMPONENT.TS

import { Component, Input, OnInit } from '@angular/core';

import { Stop } from '../../../definitions/stop';

@Component({
  selector: 'app-stops',
  templateUrl: './stops.component.html',
  styleUrls: ['./stops.component.scss']
})
export class StopsComponent implements OnInit {

  @Input() stops: Stop[];

  ngOnInit() {
    console.log(this.stops);
  }

}

STOPS.COMPONENT.HTML

<section id="stops" *ngIf="stops">
  <div class="card">
    <div class="card-block">
      <afn-stop-panel [stop]="stop" *ngFor="let stop of stops"></afn-stop-panel>
    </div>
  </div>
</section>

新しいコンテンツ情報を入力する前に、既存のコンテンツのこれらのタグをクリアするにはどうすればよいですか?

4

1 に答える 1