角度4スタイルのタグは、再ルーティング後にHTMLに残ります

Question

角度4のアプリケーションを作成しました。これには、コンポーネント：、app.component、、home.component、feature1.componentが含まれます。

app.component：

@Component({ 
     selector: 'my-app', 
     templateUrl: 'app/app.component.html', 
     styleUrls: ['app/app.component.css'], 
     encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { } 

home.component：

@Component({ 
     templateUrl: 'app/Components/home.component.html', 
     styleUrls: ['app/Components/home.component.css'], 
     encapsulation: ViewEncapsulation.None 
}) 
export class HomeComponent { } 

feature1.component：

@Component({ 
     templateUrl: 'app/Components/feature1.component.html', 
     styleUrls: ['app/Components/feature1.component.css'], 
     encapsulation: ViewEncapsulation.None 
}) 
export class Feature1Component { } 

app.routing：

const appRoutes: Routes = [ 
     { path: '', redirectTo: 'home', pathMatch: 'full' }, 
     { path: 'home', component: HomeComponent }, 
     { path: 'feature1', component: Feature1Component } 
]; 

今私はfeature1.componentをロードする際app.componentのヘッダにいくつかのスタイルを上書きしたかったです。これで、ViewEncapsulation.Noneと動作します。ただし、styleタグはhome.componentに戻ったときにHTML文書に残り、ウェブサイトのヘッダーのスタイリングはfeature1.component-ページと同じです。スタイルタグをfeature1.componentから削除するにはどうすればよいですか？

Answer 1

私は今header.componentと呼ばれる新しいコンポーネントを作成しました。 これをhome.componentとfeature1.componentにロードします。

HTMLのfeature1.component：

<div class="small-header"> 
    <header-content></header-content> 
</div> 

HTML home.component：

// no wrapper "small-header" 
<header-content></header-content> 

CSSのheader.component：

/* Styles to override in small-header */ 
:host-context(.small-header) header { 
    padding: 15px; 
    background: #45505b; 
} 
... 

ヘッダーはfeature1.componentページでのみ変更され、デフォルトのカプセル化に影響を与えずに、私が望むように動作します。