组件样式表会影响其他组件

Question

我有登录页面特定的样式表，所以我将它们包含在login.component.ts中， 并以tradational方式在根索引（“index.html”）中添加了所有常见的css文件。 我的问题是在用户登录系统之后我希望app.component ccs文件进入操作并控制身体，但背景颜色仍然保持在登录状态..

当我刷新页面（页面重新加载）时，它消失了，但使用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){
  }
}

EDITED： 我认为这些截图让它更清晰，登录后仍然存在body元素的css属性，这就是app.component隐藏的css属性的原因..

登录页面：

登录后

：

重载后（我的预期）：

那么如何防止登录组件css属性影响其他组件（app.component，我正在搜索“ViewEncapsulation”的东西，但仍然认为需要帮助）

Answer 1

您应该使用封装：ViewEncapsulation.Emulated用于您的登录，通常是您不希望它的css流失的任何组件。

如果您未指定封装，则默认为“模拟”。