Получить текущий активный дочерний компонент в Angular 6 - PullRequest
Новая
       37

Получить текущий активный дочерний компонент в Angular 6

0 голосов
/ 08 октября 2018

Я использую 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);
}

, который утешает как

enter image description here

Здесь он имеет component > name как AdminLayoutComponent , тогда как я загрузил DashboardComponent .

Как я могу получить имя текущего активного компонента или URL?

Ответы [ 2 ]

0 голосов
/ 08 октября 2018 
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)
}
0 голосов
/ 08 октября 2018

Вы можете использовать сервис 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
      }
    });
}
...