路线参数更新中的角度4内容出血

时间:2017-09-13 00:00:24

标签: angular angular-router routeparams

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

DISCOVERY

我注意到内容出血的区域是嵌入/子组件的区域,其选择器标签属性绑定到输入源的数组结构。我怀疑该数组是被附加而不是被其新内容覆盖。因此,重复信息。

例如:

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

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

1 个答案:

答案 0 :(得分:0)

<强>分辨

在动态创建活动表单期间,我错过了一个步骤。

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

此问题是我的页面出血信息的根本原因,因为内容重新加载会因我的表单崩溃而停止。新控件将添加到formGroup / Form中的现有控件。