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。

保持路由器链路对子路由有效

1 个答案: