Angular Сообщество!
В настоящее время я переписываю приложение AngularJS для Angular 2. Я хочу решить проблему, которая может быть описана как: вкладки маршрута + дочерние маршруты.
Итак, в основном маршрутизатор в Angular 2 уничтожает неактивные компоненты (мои вкладки!). Проблема в том, что я не хочу этого поведения. Причина в том, что у меня есть некоторые компоненты, такие как диаграммы и сетка данных, и вы хотите быстро переключаться между ними, я не хочу их воссоздавать.
Я нашел несколько обходных путей для сохранения моих вкладок при использовании маршрутов, но используя этот подход, я не знаю , как реализовать дочерние маршруты, Я также хотел бы иметь независимую от решения глубину (это означает: работайте на более глубоких уровнях), потому что у меня есть больше субтитров, которые необходимо сохранить.
Обходной путь: я поместил некоторый пустой компонент в маршруты и создаю экземпляры вкладок, которые скрывают их с помощью свойства [hidden]
:
app.ts:
@Component({ /*...*/ })
@RouteConfig([
{path: '/**', redirectTo: ['Dashboard']},
{path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
{path: '/products/...', name: 'Products', component: EmptyRoute},
{path: '/sales', name: 'Sales', component: EmptyRoute},
{path: '/reports', name: 'Reports', component: EmptyRoute},
])
export class App {
constructor(private router: Router) {
}
public isRouteActive(route) {
return this.router.isRouteActive(this.router.generate(route))
}
}
app.html:
<dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
<products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
<sales [hidden]="!isRouteActive(['/Sales'])"></sales>
<reports [hidden]="!isRouteActive(['/Reports'])"></reports>