为子路由保持路由器链接处于活动状态

Question

我有一个父组件，里面有一个<router-outlet>，父组件有一个指向这些路由的菜单，并且菜单有下拉子菜单。目前，活动路线始终在菜单中突出显示，但如果该菜单选项是子菜单，除非您打开它，否则它不会显示。如果路线在其中，我想保持该子菜单打开。

我想在一个地方管理这个，父母。我当前的尝试获取当前路由 url，并检查它是否包含子菜单路由字符串。这种方法的问题是我找不到一个生命周期钩子，每次为子路由更改路由时都会获取当前路由。换句话说，一个生命周期钩子，用于检测正在呈现的新子组件。

附带说明一下，我的渲染器是否因为使用原生元素而以不好的方式访问 DOM？

html:

  <div
                        class="dropdown"
                        appDropdown
                        #DropdownOne
                    >
                        <button
                            class="top item btn btn-secondary dropdown-toggle"
                            type="button"
                            id="dropdownMenuButton"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                        >
                            all options
                        </button>
                        <div
                            class="item dropdown-menu"
                            aria-labelledby="dropdownMenuButton"
                        >
                            <a
                                class="dropdown-item"
                                routerLink="/myMenu/options/option1"
                                routerLinkActive="active"
                            >
                            option 1</a>
                            <a
                                class="dropdown-item"
                                routerLink="/myoptions/options/option2"
                                routerLinkActive="active"
                            >
                            Option 2</a>
                            <a
                                class="dropdown-item"
                                routerLink="/myoptions/options/option3"
                                routerLinkActive="active"
                            >
                            Option 3</a>
                         </div>
    </div>
...
<div class="content-box col">
            <router-outlet></router-outlet>
</div>
...

ts

export class NetworkComponent implements AfterViewInit {
    @ViewChild('DropdownOne') dropdownOne: ElementRef;
    @ViewChild('DropdownTwo') dropdownTwo: ElementRef;
    url: string;
    // stateOne = 'closed';
    // stateTwo = 'closed';

    constructor(private router: Router,
                private renderer: Renderer2) {}

    ngAfterViewInit() {
        this.url = this.router.url;
        console.log(this.url)
        if (this.url.includes('interface')) {
            console.log('TRUE')
            this.renderer.addClass(this.dropdownOne.nativeElement, 'show')
        }
        if (this.url.includes('firewall')) {
            console.log('TRUE')
            this.renderer.addClass(this.dropdownTwo.nativeElement, 'show')
        }
    }

Answer 1

您可以订阅可观察的路由器事件。

constructor(private router: Router, private renderer: Renderer2) {
    this.router.events.subscribe(() => {
        const url = this.router.url;
        // do your route check here
    });
}

您可以在此处阅读有关路由器的更多信息：https://angular.io/api/router/Router#events

关于使用渲染器的旁注，我认为您可以使用像这样的简单布尔值来实现相同的效果，

<div appDropdown class="dropdown" [class.show]="isDropdownOneOpen"> ... </div>

当路由匹配时设置为 true。