Angular 4 Content Bleeding при обновлении параметров маршрута

У меня проблема с кровотечением контента. Я перенаправляюсь на страницы, извлекающие идентификатор продукта при подписке на параметры маршрута.

Он отлично работает при начальной загрузке, однако, если параметр маршрута обновляется, новое содержимое продукта загружается поверх старого содержимого. Я не хочу, чтобы контент перетекал друг в друга, поскольку они вызывают конфликты.

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>

Как очистить эти теги от их существующего содержимого перед вводом информации о новом содержимом?