Để có phần giới thiệu tốt hơn, hãy xem blog post about outlets.Bản ghi: Điều hướng giữa các bộ định tuyến
Tôi sử dụng một TabView để điều hướng thông qua ứng dụng di động của tôi được viết bằng nativescript (ProtectedComponent).
<TabView
#tabView
tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010"
[(ngModel)]="selectedIndex"
(selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)">
<StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}">
<cats-tab></cats-tab>
</StackLayout>
<StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}">
<dogs-tab></dogs-tab>
</StackLayout>
</TabView>
Đây là một phần của mã thành phần có liên quan cho điều hướng:
navigateToCatsRoot() {
this.router.navigate([
'/protected',
{ outlets: { catOutlet: ['cats'] } }
]);
}
navigateToDogsRoot() {
this.router.navigate([
'/protected',
{ outlets: { dogOutlet: ['dogs'] } }
]);
}
tabViewIndexChange(index: number) {
switch(index) {
case 0:
this.navigateToCatsRoot();
break;
case 1:
this.navigateToDogsRoot();
break;
}
}
Mỗi tab chỉ chứa các cấu hình bộ định tuyến lối thoát, ví dụ:
<router-outlet name="catOutlet"></router-outlet>
Các định tuyến được thiết lập trong theo cách sau:
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: 'protected', component: ProtectedComponent, children: [
{ path: 'cats', component: CatsComponent, outlet: 'catOutlet'},
{ path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'},
{ path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'},
{ path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'},
]},
Điều hướng tab hoạt động như một nét duyên dáng. Tôi có thể điều hướng thông qua điều hướng tab đến các cửa hàng khác nhau và tôi cũng có thể điều hướng từ một cửa hàng đến một trang chi tiết của cửa hàng đó:
this.router.navigate(
['/protected', { outlets: { catOutlet: ['cat', cat.id] } }]
);
Sự cố tôi đang gặp phải ngay khi tôi đang cố gắng nhảy từ một chế độ xem chi tiết trong một cửa hàng vào chế độ xem chi tiết khác của cửa hàng kia. Vì vậy, nếu tôi gọi những điều sau đây từ chế độ xem chi tiết của mèo:
this.router.navigate(
['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }]
);
Tôi không gặp phải bất kỳ lỗi nào nhưng không có gì xảy ra. Ngay sau khi tôi chuyển sang ổ cắm bằng cách sử dụng điều hướng tab (vẫn hoạt động) tôi thấy chế độ xem chi tiết của con chó trong một thời gian rất ngắn trước khi cài đặt lại tổng quan về chó (đó là điều hướng tab nên làm).
Điều này có nghĩa là dogOutlet thực sự được cập nhật với điều hướng và thành phần phù hợp nhưng không chuyển sang chế độ xem/đầu ra. Thành phần được tải, tôi đã xác minh rằng bằng cách đăng nhập vào chế độ xem OnInit của chi tiết con chó. Nó chỉ không chuyển sang ổ cắm đó và cho thấy ổ cắm đó.
Làm cách nào để không chỉ cập nhật ổ cắm đó mà còn chuyển sang cửa hàng vì nó hoạt động cho các thành phần tổng quan như với chế độ xem tab?