如何根据用户登录和注销来加载样式

Question

我有一种情况，我必须在登录之前加载一个样式文件，并在登录后加载另一组样式，是否可以在angular中实现相同的样式？，因为应用程序所需的所有样式和脚本都通过angular加载了。 json文件。请让我知道是否有任何方法可以执行此操作。

Answer 1

您如何在登录时在正文或顶级div上添加一个CSS类。然后使用该类覆盖所有必需的CSS。

Answer 2

我认为您不能动态加载styleUrls。但是您可以通过在SCSS文件中声明两个类“ login”和“ logout”来实现此目的。然后在模板文件中，使用ngClass在这些类之间切换。例：。scss文件

.login {
...
}

.logout {
...
}

。html文件

<div [ngClass]="{'login': isLoggedIn, 'logout': isLoggedOut}">
</div>

其中isLoggedIn和isLoggedOut是您在ts中定义的两个标志。根据您的逻辑操作这两个标志。希望对您有所帮助

Answer 3

它只有一个app.componet，如

<link rel="stylesheet" [href]='cssUrl'>
<h1>Hello Angular</h1>
<button (click)="changeCss()">toogle css</button>

您的应用必须注入DomSanitizer，并根据一个变量的值更改cssUrl变量

export class AppComponent  {
  name = 'Angular';
  cssUrl: any;
  toogle:boolean=false;

  constructor(public sanitizer: DomSanitizer) {

  }

  ngOnInit() {

    this.cssUrl = this.toogle?
      this.sanitizer.bypassSecurityTrustResourceUrl('./assets/style1.css') : 
      this.sanitizer.bypassSecurityTrustResourceUrl('./assets/style2.css');
  }
  changeCss()
  {
  this.toogle=!this.toogle
    this.cssUrl = this.toogle?this.sanitizer.bypassSecurityTrustResourceUrl('./assets/style1.css') : 
    this.sanitizer.bypassSecurityTrustResourceUrl('./assets/style2.css');
  }
}

请参见stackblitz