Question

我正在尝试实现自定义指令。我想在ngOnInit（）中获取当前路由..我找到了一些如下代码。

@Directive({
  selector: '[appLeftMenuActive]'
})
export class LeftMenuDirective implements OnInit {

  @Input('appLeftMenuActive') pathKey;

  @HostBinding('class')
  elementClass; 

  constructor(private elRef:ElementRef,private route: Router) { 

  }

  ngOnInit(): void {

    this.route.events.subscribe((data:any) => {
      console.log(data.url)
    });
  }

}

此代码运行console.log三次，我不知道为什么。有任何想法吗？或者从该指令中获得当前活动路线的更好方法是什么？

<a class="nav-link" [appLeftMenuActive]="'game'"  routerLinkActive="active" [routerLink]="['/game/list']">

Answer 1

多次调用控制台日志，因为路由器会发出多个事件：

GuardsCheckEnd
GuardsCheckStart
NavigationCancel
NavigationEnd
NavigationError
NavigationStart
ResolveEnd
ResolveStart
RoutesRecognized

如果您在设置路由时使用选项，则可以跟踪路由器的工作方式：

import {
  ExtraOptions,
  RouterModule,
  Routes
} from '@angular/router';

export const options: ExtraOptions = {
  enableTracing: true,
};

@NgModule({
  imports: [
    RouterModule.forRoot([], options),
  ],
  exports: [ RouterModule ],
})
export class AppRoutingModule { }

您可以过滤事件类型可观察事件的输出，例如：

this.router.events
 .filter(event => event instanceof NavigationEnd)
 .subscribe(...)

您可以找到有关路由器事件的更多信息：

从自定义指令中获取当前路径的角度

1 个答案: