angular - 在 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是在AppModule中导入的，我想在其中获取当前活动的组件或 URL。

所以，在 ComponentsModule 的一个组件中，我这样做是这样的：

constructor(
  private route: ActivatedRoute
) { }

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

哪个控制台喜欢

在这里，它具有component > nameas AdminLayoutComponent而我已经加载了DashboardComponent。

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

Answer 1

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

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)
}