Angular 2 SPA模板 - 模拟延迟/延迟加载

Question

我使用此git repo构建概念验证：https://github.com/rahil471/single-page-application-angular2

我有一个像这样的共享容器组件：

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app/app.component.html',
})
export class AppComponent { } 

两个（大多数）相同的子组件：

import {Component} from '@angular/core';

@Component({
    selector: 'app-home',
    template: `<h1>{{welcome}}</h1>`
})
export class HomeComponent {
    welcome : string;
    constructor(){
        this.welcome = "Welcome to home page"
    };
};

以及应用模板：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
          <li><a routerLink="/about" routerLinkActive="active">About</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <!-- routing here -->
    <router-outlet></router-outlet>
  </div>
</div>

我试图找到一种模拟这些子组件加载速度慢的方法。我尝试在组件构造函数中放置setTimeout()，但这只会减慢实际容器的重新加载速度。如何模拟这些模板子组件缓慢加载？