Question

在有角度的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仅会给我实际的网址，而我不知道如何从中获取组件名称。

使用this.activatedRouter.component会给我MainComponent（...）{...}，我需要在CustomerOverviewComponent中调用this.activatedRouter.component来获得类似CustomerOverviewComponent（。）{...}。

有什么办法可以在标头组件中获得CustomerOverviewComponent？

Answer 1

您可以出于相同的目的使用 Subject 或 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');
  })
 }
}

如何从当前网址获取组件名称？

1 个答案: