角路由器 - 如何通過多個路由模塊共享父路由

Question

我用Angular CLI創建了我的Angular應用，但現在我遇到了路由器問題。我想要構建的應用程序有一些頁眉和頁腳，但也有一些頁面沒有，例如登錄頁面。所以我需要一種方法來爲需要它的頁面分配頁眉和頁腳的佈局，併爲那些不需要的頁面使用其他佈局。什麼是正確的方法呢？

我的第一個想法是有頁眉和頁腳這將是父到需要它的所有其他路線一條路線，但我不能找到一種方法，讓多個路由模塊相同的父。在文檔中能夠找到的父子關係的唯一方法是在定義路由時通過子列表，但是然後我需要將所有路由定義在我想避免的相同位置。

第二個想法是使用輔助路由，我嘗試將app.component.html定義爲內容的主要插座和用於頁眉和頁腳的兩個輔助插座，但之後我無法從功能路由模塊訪問輔助插座。

第三個想法是爲具有頁眉和頁腳的每個頁面使用相同組件的父路由。該共享組件將指定頁眉和頁腳，但這裏的問題在於，每次用戶導航到不同的功能時，頁眉和頁腳都會實例化，以便重置其狀態。

隨着我使用AngularJS UI的路由器，這是很容易與命名視圖，並指定共享父狀態的能力去做。我真的很感激在這裏指出正確的方向。

Answer 1

會這樣的工作？

- 應用組件（與路由器出口）

----父組件（具有頁眉，頁腳和子路由器出口）

------要內所顯示的子組件父組件的路由器出口

----其他組件（如沒有頁眉或頁腳登錄）

Answer 2

您可以訂閱你的頁腳組件內部的路由器，只是隱藏它基於的航線。

1）最簡單的黑客十歲上下的方式是簡單地將其隱藏

footer.component.ts

@HostBinding('style.display') 
display :string = 'block'; 

constructor(private router: Router) {} 

ngOnInit() { 
    this.router.events.subscribe((val) => { 

    if (val instanceof NavigationEnd) { 
    this.display = 'block'; 
    if (val.url == '/hidefooterroute') { 
     this.display = 'none'; 
    } 
    } 
... 

2）另一種方法可以做到這一點是要堅持的路線PARAMS .data並在主應用或服務內部訂閱。

someRoutes = [ 
    { path:'awesome', data:{ showFooter: false, title: 'This is page is too awesome for a footer'}, loadChildren: "./awesome.module#awesomeModule" } ]; 

... 

this.router.events 
    .filter(event => event instanceof NavigationEnd) 
    .map(() => this.activatedRoute) 
    .map(route => { 
    while (route.firstChild) route = route.firstChild; 
    return route; 
    }) 
    .filter(route => route.outlet === 'primary') 
    .subscribe((route) => { 
    // do things with route 
    route.data.subscribe((data) => { 
     // do things with route data 
     this.showFooter = data.showFooter; 
    }); 
    });