代码之家 › 专栏 › 技术社区 › Rakesh Roy

如何知道角5及以上的路由器出口中加载了哪个组件

angular5 routing angular

Rakesh Roy · 技术社区 · 6 年前

这是我的ap。组成部分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}
];

2 回复 | 直到 6 年前

Sajeetharan 6 年前

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

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

Rakesh Roy 6 年前

标题。组成部分html

<nav class="navbar navbar-expand-lg navbar-dark bg-primary py-3" [ngClass]="{'isNotFound': isNotFound, 'isHome': isHome}" id="mainNav">
  <div class="container">

路由

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

标题。组成部分ts

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

首先,我只向notfound组件发送数据,然后在header组件上接收数据,然后使用 ngClass 在路由器出口外部的导航栏上添加一个类。

这就是我解决问题的方法,不过谢谢你的建议。:)

推荐文章

Present practice · Angular5如何防止url更改时重新加载页面

6 年前

Rakesh Roy · 如何知道角5及以上的路由器出口中加载了哪个组件

6 年前

Bham · Symfony通过yaml路由名称

6 年前

Abhinav Jha · 如何在jquery帖子的回调中重定向

6 年前

Nagaraja SV · 如何在golang中使用julienschmidt/httprouter传递两个或多个参数?

6 年前

Burst of Ice · 成功身份验证后角度路由不工作

6 年前

RyanIndustries8 · 阵列角度布线5

6 年前

Andrei · 有没有办法通过本机或库向Android VPN添加自定义路由规则?

6 年前

mike · 从预定功能路由烧瓶

6 年前

David Lee · 在开发期间使用localhost创建到子域的HREF

6 年前