角色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 。但是，当切换回 home.component 时，样式标记现在仍保留在HTML文档中，并且网站标题的样式与 feature1.component -page上的样式相同。如何从 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 页面上更改标题，它可以正常工作，而不会影响默认的封装。