問題描述如下：如果有 master-detail 畫面，在 master 中控制 detail 的顯示（例如：查詢使用 list-component.html, 新增使用 add-component.html），如下圖：
整個頁面的html 設計如下：
<form #form="ngForm" (submit)="retrieveList()" class="form-horizontal" novalidate>
...
<button type="button" class="btn btn-info" (click)="onQuery()">查詢 </button>
<button type="button" class="btn btn-success" (click)="onAdd()">新增 </button>
</div>
</form>
<router-outlet></router-outlet>
我們再查詢時候，使用 router.navigator：
onQuery() {
this.router.navigate(["trace/list", this.careType, this.year, this.month]);
}
這時候設定不同條件按下【查詢】一次以上，查出來的資料會不斷的重疊，這是因為實際上查詢出來的資料是放入到 router-outlet 中，因為沒有清除，所以會不斷的累積。
解決方式是導入另外一個 empty-component 顯是空白資料，如下：
@Component({
selector: 'trace-empty',
template: '<p>請按下【查詢】資料</p>',
styles: []
})
export class TraceEmptyComponent {
}
在 child routing 中，設定此 empty routing：
{
path: 'trace', component: TraceFileComponent,
children: [
{ path: '', component: TraceEmptyComponent },
{ path: 'list/:type/:year/:month', component: TraceListComponent },
{ path: 'edit/:type/:id', component: TraceEditComponent }
]
},
之後，在 input html 中，
<select type="text" name="Month" class="form-control" [ngModel]="month" (ngModelChange)="month=$event; onClear()"> … </select>
指定 onModelChange event 呼叫 onClear() 將畫面跳到 empty component 中：
onClear() {
this.router.navigate(["trace"]);
}
使用結果會在點選月份時候，將 router-outlet 轉 empty component，然後按下查詢後，就會到真正顯示頁面，藉由 empty component 清空 router-outlet 來避免顯示疊加的問題。