2つの異なるhtmlページ間のAngular2ルーティング

Question

私は、フロントエンドと管理インターフェースを含むangular2アプリケーションを持っています。

フロントエンドには、index.htmlで定義された一連の特有のフロントエンドスタイルがあります。

管理者インターフェイスには、フロントエンドのスタイルと競合する独自のスタイルセットがあります。

私はadmin.htmlとindex.htmlを持っています。ユーザーがパス/ admin/**を選択すると、admin.htmlを使用して表示されます。そうでない場合は、index.htmlが表示されます。アプリケーションの他のすべて（アプリケーションモジュール、サービスなど）は共有する必要があります。

2つの異なるルートコンポーネントを使用し、CSSをカプセル化することを考えましたが、ほとんどのスタイルは通常のCSSファイルに含まれています。これらを異なるルートコンポーネントに関連付けることは現実的ではありません。

Answer 1

コンポーネントにスタイルをカプセル化してみませんか？角2は単一のページアプリです。複数のhtmlページ（index.html）を使う必要はなく、決して使用しないでください。あなただけのさまざまなコンポーネントを作成し、それぞれのスタイルシートを指定することができます。

ホームコンポーネント

import { Component } from '@angular/core'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: 'home.component.html', 
    styleUrls: ['home.component.css'], 
    selector: 'home', 
}) 
export class HomeComponent {} 

管理コンポーネント私のルータ、アウトレットは行くだろう

import { Component } from '@angular/core'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: 'admin.component.html', 
    styleUrls: ['admin.component.css'], 
    selector: 'admin', 
}) 
export class AdminComponent {}