解決 router-outlet 出現顯示疊加的問題

問題描述如下:如果有 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 來避免顯示疊加的問題。