在Angular 8中,动态生成的路由上,RouterLinkActive指令可能无法正常工作。这是因为RouterLinkActive指令是在页面加载时检查当前路由与链接路由是否匹配的,而动态生成的路由可能还没有加载完毕,导致RouterLinkActive指令无法正确检测当前路由。
解决这个问题的方法是使用ngAfterViewInit生命周期钩子来延迟初始化RouterLinkActive指令,确保路由已经加载完毕后再进行检查。
以下是一个示例代码:
在动态生成的组件中,添加ngAfterViewInit生命周期钩子:
import { Router, ActivatedRoute } from '@angular/router';
import { Component, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-dynamic-component',
template: `
Dynamic Link
`
})
export class DynamicComponent implements AfterViewInit {
constructor(private router: Router, private route: ActivatedRoute) {}
ngAfterViewInit() {
this.router.navigate(['/dynamic']);
}
}
在父组件中,使用动态加载组件的方法:
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {}
ngAfterViewInit() {
const factory = this.resolver.resolveComponentFactory(DynamicComponent);
const componentRef = this.container.createComponent(factory);
}
}
这样,当父组件加载完毕后,动态组件会在ngAfterViewInit生命周期钩子中被创建,并且在该钩子中执行了路由导航,从而确保RouterLinkActive指令能够正确工作。
注意:确保在父组件的模板中,使用了RouterOutlet来渲染动态组件的路由视图。
希望以上解决方法能帮助到你!