Использование слайдера начальной загрузки в Angular 2 с динамическим слайдером данных не работает

Question

import { Component, OnInit } from '@angular/core';
import { TreandingNewsServices } from '../services/trending-news-services';
@Component({  
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {

  trendingNewData:any[];

  constructor( private trendingSerNews: TreandingNewsServices ) { }

  ngOnInit() {

    this.trendingNewData = this.trendingSerNews.getTrenNews();

  }

}

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

, то слайдер не будет отображаться в HTML DOM.

Примечание: использование динамических данных в элементе карусели начальной загрузки совы

  <div id="demo" class="carousel slide" data-ride="carousel">


      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>


      <div class="carousel-inner">
        <div class="carousel-item" *ngFor="let newstreList of trendingNewData;">
            <img [src]="newstreList.trenImage" title="{{newstreList.trenImage}}">
          <div class="carousel-caption">
              <h1>{{newstreList.trenHeading}}</h1>
              <p> {{newstreList.treanDescription}}</p>
            </div>
        </div>


      </div>


      <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
    </div>