Question

如何根据路线网址

启用特定组件

我在母版页中有如下组件

app.component.html

<div class="col-md-7">
 <headerBar  ></headerBar>
</div>
<div class="col-md-4">
   <fd-login></fd-login>
</div>

在这种状态下，app url显示如下，

http://localhost:3000/en/search

我想隐藏标题栏只在应用程序处于上述以外的其他状态时才显示，如何使用ngIf在html中检查它还是有其他方式？

Answer 1

您可以订阅路由器事件，然后根据URL设置属性：

constructor(router:Router) {
  router.events
  .filter(e => e instanceof NavigationEnd)
  .forEach(e => console.log(e.url);  
}

Answer 2

@GünterZöchbauer试图说，你需要这样的东西。

创建主应用程序组件后，使用路由器插座将html文件链接到该组件。

<div class="container">
<router-outlet></router-outlet>
</div>

然后在路由器配置文件列表中列出组件和不同的路径。

export const rootRouterConfig = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeSectionComponent},
  {path: 'search', component: SearchSectionComponent},
  {path: 'login', component: LoginSectionComponent},
];

然后将其与您的应用组件一起导入主模块。

这将允许您将1个组件映射到1个状态，从而为您提供不显示其他组件的所需结果。

请继续访问Angular网站，因为他们已经详细解释了我在此处所展示的内容。他们有一个教程，您可以阅读，编码以及了解路由的工作原理。

以下是Angular 2架构的链接：this

根据路由URL启用组件

2 个答案: