Angular 4 路由参数更新时内容流失

Question

我有这个内容流失问题。我在订阅路由参数时路由到拉取产品 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 }
];

发现

我注意到内容渗漏的区域是 embedded/child 组件，其选择器标签属性绑定到输入源的数组结构。我怀疑数组被附加而不是被它的新内容覆盖。因此信息重复。

例如：

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

如何在输入新内容信息之前清除这些标签的现有内容？

Answer 1

已解决

我在动态创建响应式表单的过程中遗漏了一个步骤。

this.productForm: FormGroup = this.formBuilder.group({});

这个问题是我的页面泄露信息的根本原因，因为内容重新加载会由于我的表单崩溃而停止。新控件将添加到 formGroup/Form.

中的现有控件中

Angular 4 路由参数更新时内容流失

Angular 4 Content Bleeding on Route Param Update

routeparams

angular

angular-router