Question

这是我的ap.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

如何知道在路由器插座中加载哪个组件，然后根据组件在标题或正文上添加一个类。

就像Home加载一样，然后在主体上添加一个home类。或者如果404页面没有在身体上发现类

我的路由

const routes: Routes = [
  { path: '' , component: HomeComponent},
  { path: 'directory' , component: DirectoryComponent },
  { path: 'directory/:slug' , component: DirectorySingleComponent },
  { path: 'pricing' ,component: PricingComponent },
  { path: 'services' , component: ServicesComponent },
  { path: '', pathMatch: 'full', redirectTo: '/' },
  { path: '**', component: NotfoundComponent}
];

Answer 1

您需要在组件内部或基于变量处理此问题，您可以使用路由器的url属性来获取当前组件的URL

constructor(router: Router) {
this.router.events.subscribe((event: Event) => {
            console.log(event.url); //based on this change class
    });
}

Answer 2

header.component.html

...
  { path: 'services' , component: ServicesComponent },
  { path: '', pathMatch: 'full', redirectTo: '/' },
  { path: '**', component: NotfoundComponent , data: { status : 'notfound'}}
];

路由

 ngOnInit() {
    this.isNotFound = false;
    this.router.events
        .filter(e => e instanceof NavigationEnd)
        .subscribe(event => {
          this.isNotFound = this.route.firstChild.data._value.status;
          if (this.isNotFound) {
            this.isNotFound = true;
          }
        });
  }

header.component.ts

ngClass

首先，我只将数据发送到notfound组件，然后在标头组件上接收它，然后使用APP_DEBUG=true在路由器插座外部的导航栏上添加一个类。

这就是我解决它的方式，尽管感谢所有的建议。：）

如何知道Angular 5及以上版本的路由器插座中加载了哪个组件

2 个答案: