Угловые 6-ти проходные данные компоненту по щелчку меню роутера

Question

У меня есть компонент navmenu как под:

     <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class='glyphicon glyphicon-wrench'></span> Configuration<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="dropdown-header">Options</li>
            <li [routerLinkActive]="['link-active']">
                <a [routerLink]="['config']" [queryParams]="{optionFilter: 'LOB' }">
                    <span class='glyphicon glyphicon-arrow-right'></span> Line of Business
                </a>
            </li>
            <li [routerLinkActive]="['link-active']">
                <a [routerLink]="['config']" [queryParams]="{optionFilter: 'RG' }">
                    <span class='glyphicon glyphicon-arrow-right'></span> Report Groups
                </a>
            </li>
        </ul>
    </li>

В разделе "Конфигурация" есть раскрывающиеся меню. Все меню ведут к одному и тому же компоненту «config». Однако на основе выбранного routerLink мне нужно написать логику. Как передать параметр «Сфера деятельности» или «Группа отчетов» в компонент конфигурации и получить его в ngOnInit?

Answer 1

1. Вы можете передать это в параметрах запроса:

<a [routerLink]="['config'] [queryParams]="{ someProperty: 'ReportGroup' }">

Вставить ActivatedRoute в конструктор компонента и подписаться queryParams или queryParamsMap.

Или

Вы можете сделать это двумя отдельными маршрутами, указывающими на один и тот же компонент.Снова введите ActivatedRoute, но подпишите параметры маршрута вместо параметров запроса.

Answer 2

Пропущены параметры запроса, предложенные mbojko, и получены в компоненте, как показано ниже:

//import router in component
import { ActivatedRoute} from '@angular/router';

//constructor:
    constructor(
        private _route: ActivatedRoute) { }
 ngOnInit() {
        this._route
            .queryParams
            .subscribe(params => {
                this.FilterOption = params['optionFilter'];
                console.log('menu click', params['optionFilter']);
            });
}