経路パラメトリックアップデートで角度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 } 
]; 

DISCOVERY

Iコンテンツ出血を有していた領域は、セレクタ入力ソースのアレイ構造に結合したプロパティであるタグ/子要素を埋め込まれているものであることに気づきました。私は配列が新しいコンテンツで上書きされるのではなく、追加されていると思う。したがって、情報の複製。例えば

：私は前に、新たなコンテンツ情報の入力に彼らの既存のコンテンツのこれらのタグをクリアするにはどうすればよい

<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内の既存のコントロールに追加されます。