基於路由的URL啓用組件

-3

如何啓用基於路徑的URL特定組件，基於路由的URL啓用組件

我有一個組件，如下這是在母版頁

app.component.html

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

在該狀態下應用網址

示出了如下，

http://localhost:3000/en/search

我想隱藏標題欄，只有當應用程序處於上述其他狀態時纔會出現，我如何使用ngIf在html中檢查它，或者是否有替代方法？

來源

2017-03-09 Sajeetharan

這通常路由器做什麼。 –

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html – Maxime

@GünterZöchbauer我不明白 – Sajeetharan

您可以訂閱路由器事件，然後設置根據URL的屬性：

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

來源

2017-03-09 16:49:33

@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網站，因爲它們比我在這裏展示的更詳細地解釋了它。他們有一個你可以閱讀的教程，與代碼一起學習如何路由工作。

下面是對角2架構的鏈接：https://angular.io/docs/ts/latest/guide/architecture.html

來源

2017-03-09 16:54:05 MatrixEntry1337

基於路由的URL啓用組件

回答

相關問題