コンポーネントのスタイルシートは他のコンポーネントに影響を与えます

私はログインページのスタイルシートを持っていますので、login.component.ts、にそれらを組み込み、ルートインデックス（ "index.html"）のすべての共通CSSファイルをtradational wayで追加しました。私はページを更新すると私の問題はコンポーネントのスタイルシートは他のコンポーネントに影響を与えます

..私はアクションで行くと体の制御を取るが、それは、ログインにあったように背景色が残っているCCSファイルをapp.componentことを期待システムにログインしたユーザの後にある（ページのリロード）そのを行ったがangular2を使用しての主な目的は、

ここ

は私のlogin.component.ts

import { Component,HostBinding,ViewEncapsulation } from '@angular/core'; 
import {Auth} from '../auth/auth.service'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: [ 
    '../../assets/css/colors/cyan.css',// this is the css file used only for login page 
    '../../assets/css/login-page/form.css', 
    ], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class LoginComponent { 

    @HostBinding('class') siteNavbarSmallClass = 'login-form login-form-second page-login-second'; 
    constructor(private auth:Auth){} 
} 


app.component.ts 

import { Component,HostBinding, ViewEncapsulation } from '@angular/core'; 
import {Auth} from './auth/auth.service'; 

@Component({ 
    selector: 'body', 
    templateUrl: './app.component.html', 
    styleUrls: [ 
    'assets/css/global/slidePanel.min.css', 
    'assets/css/colors/default.css',// this is the css file I want to use for others. 
    ], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class AppComponent { 
    @HostBinding('class') siteNavbarSmallClass = 'dashboard site-navbar-small'; 
    constructor(private auth:Auth){ 
    } 
}

に編集..ですので、私はそれを処理することができますどのようにその単一のページアプリを更新する必要されていない：私はこれらのスクリーンショットがより明確になると思う、CSSのattrib