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

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

0 голосов
/ 25 сентября 2018

В угловом SPA у меня есть кнопка в компоненте заголовка, а роутер-розетка в основном компоненте.Что мне нужно, так это когда я перемещаюсь по другому компоненту (например, CustomerOverviewComponent), и текущий url - это / customer / customer-Overview.Когда я нажимаю эту кнопку в заголовке, я хочу вызвать метод CustomerOverviewComponent.

main.component.html

<app-header></app-header>
<router-outlet name="page"></router-outlet>

header.component.html

<button (click)="doSomething()"></button>

header.component.ts

constructor(private router: Router, private activatedRouter: ActivatedRouter)
doSomething() {
  console.log(this.router.url); // if I navigate to customer overview, 
                                // will give me the result like this
                                // /customer/(page:customer-overview)

 console.log(this.activatedRouter.component); // this will print out
                                              // ƒ MainComponent(...){...}
}

То, что мне нужно, находится внутри Header component, я хочу получить имя компонента текущего URL.Использование this.router.url даст мне только фактический URL, и я не знаю, как получить из него имя компонента.

И использование this.activatedRouter.component даст мне ƒ MainComponent (...) {...}, мне нужно вызвать this.activationRouter.component в CustomerOverviewComponent, чтобы получить что-то вроде ƒ CustomerOverviewComponent (...) {...}.

Есть ли способ получить CustomerOverviewComponent в компоненте заголовка?

1 Ответ

0 голосов
/ 25 сентября 2018

Вы можете использовать Субъект или BehaviorSubject для той же цели

Создать службу и определить в ней тему.

.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class AppCommonService {

theme = new BehaviorSubject<Number>(0);
toolbarTitle = new BehaviorSubject<String>('');


constructor() { }

}

Подписаться на тему в вашем компоненте заголовка. 

header.component.ts
export class HeaderComponent implements OnInit{
constructor(
 private appCommonService: AppCommonService)

 ngOnInit(){
  this.appCommonService.toolbarTitle.subscribe(data=>{
      console.log(data);
  })
 }

 doSomething(){
   //navigate to customer-overview component
 }
}

Установить Значение субъекта всякий раз, когда вы переходите к другому компоненту 

customer-overview.component.ts
export class CustomerOverviewComponent implements OnInit{
 constructor(
 private appCommonService: AppCommonService)

 ngOnInit(){
  this.appCommonService.toolbarTitle.next('Customer-Overview');
  })
 }
}
...