大家好，本人剛學完不久，目前專案使用angular material
專案的畫面規劃主要分成三個部分：上、左、右。
上面就是 標題列跟工具列。
左邊則是 樹狀選單，點選之後，會根據類型讀取對應的內容
右邊則是 table(電腦)或是list card(手機)顯示上述的內容
舉例：在左邊點了Student，會取得所有Student的內容，並顯示在右邊
點了Teacher，會取得所有Teacher的內容並顯示在右邊
網址的變化是：http://localhost/Student --> http://localhost/Teacher
目前routing如下：
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
},
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: ':type',
component: ItemComponent,
}
]
},
];
右邊目前是一個item component，會根據是電腦或是手機來決定顯示的方式：
html code如下：（手機的部分還沒開始寫）
<!-- 手機顯示樣式 -->
<ng-container *ngIf="isMobile$|async; else elseTemplate">
<!-- <app-item-card *ngFor="let item of items" [item]="item" (dblclick)="onDbClickRow(item)"></app-item-card> -->
</ng-container>
<!-- 電腦顯示樣式 -->
<ng-template #elseTemplate>
<app-table></app-table>
<!-- <router-outlet></router-outlet> -->
</ng-template>
現在碰的問題是：因為我把table拉出來成為shared的component，請問如果換成其他的類型的時候(如：Teacher)該怎麼重新載入table？
table是參考以下網址中的Table retrieving data through HTTP
https://material.angular.io/components/table/examples
因為範例程式是寫在ngAfterViewInit，我不知道該怎麼讓item component知會table component內容改變了，或是說table component要砍掉，根據目前param重新顯示。
table.component的程式如下：
displayedColumns = [];
data = [];
resultsLength = 0;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
private route: ActivatedRoute,
private router: Router,
private tableService: TableService
) { }
type: string;
ngAfterViewInit() {
this.paginator.page
.pipe(
startWith({}),
switchMap(() => {
const type = this.route.snapshot.params.type;
return this.tableService.getItems(type, this.paginator.pageIndex);
}),
map(data => {
const itemState = data.payload;
this.resultsLength = +itemState.data.Item[0]['@itemmax'];
if (this.displayedColumns.length === 0) {
const property: [] = itemState.template['property']['Item'];
for (const p of property) {
const obj = { title: p['label']['#text'], name: p['name'] };
this.displayedColumns.push(obj);
}
}
return itemState.data.Item;
}),
catchError(() => {
return of([]);
})
).subscribe(data => this.data = data);
}
或是有其他比較好的作法？