URLの角度に基づいたカスタムビュー

Question

私は、1つの角度2/4アプリケーションでURLに基​​づいて異なるレイアウトとスキンをロードする必要があるという要件があります。それをどうすれば実現できますか？例えば

：

はlocalhost：8080 /コンテキスト/ VIEW1とローカルホスト：8080 /コンテキスト/ VIEW2は異なる皮膚とレイアウトを示すべきです。

すべてのポインタが役立ちます。

Answer 1

これは、親ルーティングまたは子ルーティングのたびにページルーティングでオブジェクトを取得する角度2 /角度4ルーターイベントです。 'urlAfterRedirects'のキーが含まれ、* ngIfを使用してビューを処理できます。

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

Answer 2

私はこれを処理するような方法は、現在のスキン名、ヘッダとフッタのURLとすべての他の皮膚関連の情報を扱うための責任があるレイアウトサービスを作成することです。

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を更新するかどうかを確認することができます今後のレイアウト。レイアウトを更新するには、setLayout（）を呼び出すだけで、レイアウトサービスのすべてのユーザにレイアウトの変更が通知されます。 これで、レイアウトについて何か知っている必要があるコンポーネントにこのサービスを注入するだけで、それに応じて対応することができます。

たとえば、先頭の要素の1つに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 
} 

012 AppComponentで

、layoutserviceを注入して、現在のレイアウト購読：

app.component.ts

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

そして今、あなたのように、ヘッダー、フッターのパスとスキン名をしてください使用します。ここのスキンは、スキンの名前をコンテンツプレースホルダのクラスプロパティにバインドすることによって制御されます。そうすることで、レイアウトサービス内のスキン名を変更するだけで、コンテンツプレースホルダ内のすべてのアイテムを更新することができます。

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>