Існує обхідний шлях використання вторинних маршрутів, оскільки Angular зберігатиме їх у первинній навігації маршрутом.
Спочатку додайте іменовану розетку маршрутизатора у верхній компонент:
<router-outlet name="params"><router-outlet>
Далі створіть фіктивний компонент для маршрутизації до:
@Component({
template: ""
})
export class ParamsComponent {}
та визначте маршрут для створення екземпляра цього компонента до названої розетки:
{
path: ':val1',
component: ParamsComponent,
outlet: "params"
}
Змініть навігацію в додатку на:
https://my.application.com/(params:val1)
Якщо ви подивитесь на будь-який ActivatedRoute, ви можете знайти маршрут "params", використовуючи:
var paramsRoute = this.activatedRoute.route.children.find(r => r.outlet == "params");
Якщо paramsRoute має значення null, URL-адреса не містить (params: val1).
Ця наступна частина стає трохи "хакерською", оскільки вторинний маршрут створюється після первинного маршруту при початковому завантаженні. Через це, доки ваш додаток не буде повністю завантажений, ви можете виявити, що paramsRoute.snapshot має значення null. Існує приватна власність "_futureSnapshot", яка буде містити параметри маршруту при початковому запуску ... і зберігатиметься протягом життя програми. Ви можете дістатись до них, використовуючи:
var queryParams =
paramsRoute
? paramsRoute["_futureSnapshot"].params
: {};
var val1 = queryParams["val1"];
Враховуючи, що _futureSnapshot не є частиною загальнодоступного API, це, мабуть, поле, яке ми не повинні використовувати. Якщо ви відчуваєте неприємний спосіб використання, можливо, ви можете підписатися на paramsRoute.params, але це, ймовірно, ускладнить ваші компоненти.
if (paramsRoute) {
paramsRoute.params.subscribe(params => {
this.queryParams = params;
this.loadData();
});
} else {
this.queryParams = {};
this.loadData();
}
========= ЗМІНИ =============
Я знайшов ще кращий спосіб витягти параметри запиту, який, безумовно, НЕ icky ... У компонент або службу, яка створюється за допомогою екземпляра до того, як відбувається маршрутизація, додайте таку логіку:
const routeRecognizedSubscription = this.router.events
.filter(e => e instanceof RoutesRecognized)
.subscribe((e: RoutesRecognized) => {
const paramsRoute = e.state.root.children.find(r => r.outlet == "params");
if (paramsRoute) {
// capture or use paramsRoute.params
}
routeRecognizedSubscription.unsubscribe();
});
Цей код тимчасово підписується на RoutesRecognized події, які відбуваються перед навігацією. Отримавши першу подію, він автоматично скасує підписку, оскільки це потрібно зробити лише під час запуску програми.
На першій події ми шукаємо стан, що відповідає торговому пункту "params". Якщо знайдено, властивість params буде містити потрібні нам дані. Не потрібно отримувати доступ до приватної власності.