Маршрутизация и изменение содержимого шаблона в угловых 4?

Question

Я хочу создать веб-сайт с угловым... на моем сайте основным компонентом является HomeComponent. так в доме у меня есть этот список:

<a (click)="getcatbook('programming')">programming</a>

"getcatbook (kind: string)" было написано в HomeComponent как:

cat:boolean=false;
catagories : any=[];
kind : string;
getcatbook(kind){
  this.kind=kind;
  this.cat=true;
  const promise=this._appService.getcatBooks(kind);
  promise.subscribe(
    data => {
      var jsonObject = data.json();
      console.log(jsonObject);
      this.catagories = jsonObject;
    },
    error => {
      console.log(error);
    });
}

это сделать запрос и получить все книги в базе данных с добрым программированием. так в домашнем шаблоне я тоже пишу.

        <div *ngIf="cat == false">
          <div id="content" *ngFor="let book of books | filterdata :Search:'name' ">
            <h3>{{book.name}}</h3>
            <p>{{book.description}}</p>
            <p>{{book.author}}</p>
            <p>{{book.year}}</p>
          </div>
        </div>
        <div *ngIf="cat == true">
          <div id="content" *ngFor="let cats of catagories  | filterdata :Search:'name' ">
            <h3>{{cats.name}}</h3>
            <p>{{cats.description}}</p>
            <p>{{cats.author}}</p>
            <p>{{cats.year}}</p>
          </div>
        </div>

если cat был false перед тем, как нажать "getcatbook()", на странице будут показаны все книги, которые являются массивом книг, но при нажатии "cat" будет "true" и покажет только книги по программированию, которые находятся в массиве catagories. пока здесь? это прекрасно работает, но когда мне нужно вернуться к основному содержанию дома, что означает, что мне нужно показать всю книгу в массиве книг, она не работает.

основной список в NavComponent записывается так:

    <div class="left_column_boxes" >
      <h4>Navigation</h4>
      <div id="navcontainer">
        <ul id="navlist">
          <li routerLinkActive="active current"><a routerLink="/home">Home</a></li>
          <li routerLinkActive="active current"><a routerLink="/login" >LogIn</a></li>
          <li routerLinkActive="active current"><a routerLink="/addbook">Add Book</a></li>
          <li routerLinkActive="active current"><a routerLink="/about">About us </a></li>
        </ul>
      </div>
    </div>

я потерял основной контент? как я могу это показать?