在Angular 6中获取当前的活动子组件

Question

我正在使用Angular 6。

我在应用程序中创建了一个深层路由，其中​​app.module带有组件AdminLayout的声明

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([]),
    ComponentsModule,
  ]
});

还有AdminLayoutComponent是一个模块，它会导入其中的所有其他模块。

@NgModule({
  imports: [
    ...
    DashboardModule
  ],
  declarations: []
})
export class AdminLayoutModule { }

ComponentsModule 导入了我想要获取当前活动组件或URL的 AppModule 中。

因此，在 ComponentsModule 的组件内部，我正在这样做：

constructor(
  private route: ActivatedRoute
) { }

ngOnInit() {
  console.log(this.route);
}

喜欢哪个控制台

在这里，它的component > name为 AdminLayoutComponent ，而我已经加载了 DashboardComponent 。

如何获取当前活动的组件名称或URL？

Answer 1

您可以使用Router服务获取当前网址，每次导航中的网址更改都可以， 订阅路由事件以保持更新

import {  Router } from '@angular/router';

组件

constructor( private _router: Router,) { ...}

ngOnInit() {
   this.router.events.subscribe(e => {
      if (e instanceof NavigationStart) {
        console.log(e.url);
        console.log(this.router.routerState.root.snapshot.firstChild); // active component
        console.log(this.router.routerState.root.snapshot.data); // route data
        console.log(this.router.routerState.root.snapshot.routeConfig); // routes list
      }
    });
}

Answer 2

public ngOnInit() {
  this.helloChild()
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.helloChild()
    }
  })
}

private helloChild() {
  const firstChild = this.route.snapshot.firstChild
  console.log('firstChild', firstChild)
}