基於Angular URL的自定義視圖

Question

我有一個需求，我需要在單個角度爲2/4的應用程序中基於URL加載不同的佈局和皮膚。我怎樣才能做到這一點？

例如：

本地主機：8080 /上下文/廠景和本地主機：8080 /上下文/視圖2應該顯示不同的皮膚和佈局。

任何指針都會有幫助。

Answer 1

這是Angular 2/Angular 4路由器事件，每當它是父路由或子路由時，您將在其中獲取頁面路由中的對象。它將包含一個密鑰'urlAfterRedirects'，您可以使用* ngIf處理視圖。

router.events.subscribe(data => { 
     console.log(data); 
}); 

Answer 2

我會處理這個問題的方法是創建一個負責處理當前皮膚名稱，頁眉和頁腳網址和所有其他皮膚相關信息的佈局服務。

layout.ts

export class Layout { 
    skin: string; 
    headerUrl: string; 
    footerUrl: string; 
    //Add all properties you might need 
} 

這裏是一個服務的框架，用於管理佈局：

layoutservice.ts

import { BehaviorSubject, Observable } from 'rxjs/Rx'; 
import { Router, NavigationStart } from '@angular/router'; 
import { Layout } from './layout'; 

@Injectable() 
export class LayoutService { 
    private _currentSubject = new BehaviorSubject<Layout>(this.getDefault()); 
    public current = this._currentSubject.asObservable(); 

    constructor(private router: Router) { 
     this.init(); 
    } 

    private init() { 
     this.router.events.subscribe(event => { 
      if (event instanceof NavigationStart) { 
       //Navigation occured, check if we should switch layout. 
      } 
     }); 
    } 

    private getDefault(): Layout { 
     return { skin: 'skin_a', headerUrl: 'http://somewhere.com/header', footerUrl: 'http://somewhere.com/footer' }; 
    } 

    private setLayout(layout: Layout): void { 
     this._currentSubject.next(layout); 
    } 
} 

所以這項服務將認購任何導航更改，你可以申請一些邏輯，看看你是否應該更新c urrent佈局。要更新佈局，只需調用setLayout（），佈局服務的所有訂戶都會收到關於佈局更改的通知。 現在，您可以將此服務注入任何需要了解佈局的組件，並且可以做出相應的反應。

例如，我會通過將css類應用於其中一個頂層元素來控制皮膚。因此，我想創建一個默認外觀的CSS，然後覆蓋在單獨的文件麪皮項目：

default.css

.my-skinned-class { 
    color: #000; 
    background: #FFF; 
} 

.my-not-skinned-class { 
    border-radius: 50%; 
} 

skin_a.css

.skin_a .my-skinned-class { 
    //Override style 
} 

skin_b .css

.skin_b .my-skinned-class { 
    //Override style 
} 

在AppComponent，注入layoutservice，然後訂閱當前佈局：

app.component.ts

this.layoutservice.current.subscribe(layout => this.layout = layout); 

而現在使用頁眉，頁腳路徑和皮膚的名字，都可以。這裏的皮膚是通過將皮膚的名稱綁定到內容佔位符的類屬性來控制的。通過這樣做，您只需更改layoutservice中的外觀名稱即可更新內容佔位符內的所有項目。

app.html

<div class="header"><img [src]="layout.headerUrl" /> 
</div> 
<div class="content" [attr.class]="layout.skin"> 
    <div class="my-skinned-class">This item change skin depending on layout!</div> 
    <div class="my-not-skinned-class">This item will not change skin depending on layout!</div> 
    <!-- Add content --> 
</div> 
<div class="header"><img [src]="layout.footerUrl" /> 
</div>