Angular 角度6将数据传递到路由器菜单上的组件单击

我有一个导航菜单组件，如下所示：

     <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>

//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']);
            });
}

选项

配置下有下拉菜单。所有菜单都指向同一组件“配置”。但是，基于所选的routerLink，我需要编写逻辑。如何将参数“业务线”或“报告组”传递给配置组件并在ngOnInit中检索

您可以在查询参数中传递：

---

按照mbojko的建议传递queryparams，并在组件中检索，如下所示：

     <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>

//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']);
            });
}

看一下这里的文档：