Angular 从组件内部更改 styleUrls 值

Question

我正在尝试允许用户在运行时更改 styleUrls 值，所以我正在尝试：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  // styleUrls: [ './app.component.css' ]
  styleUrls: [styleUrl]

})
export class AppComponent implements OnInit  {

  styleUrl = './app.component.css'
  
  ngOnInit() {

    this.styleUrl = './another.css';

  }

}

这行不通，是否可以让这样的东西起作用？

如果是怎么办？

Answer 1

你想要的可以实现，但不是这样。

虽然您可以指定文件并在运行时更改它们，但使用 Reflect Metada Api，这是相当先进的，可能会导致 Angular 出现其他问题这条线。

如果只想更改单个组件的样式，可以使用两个 scss 文件和一个 HostBinding.

来实现

这是一个例子：

Component

@Component({
  selector: 'my-app',
  templateUrl: '<button (click)="changeStyle()">Change Style</button>',
  styleUrls: [ './app-one.component.scss', './app-two.component.scss' ]
})
export class AppComponent implements onInit {

  @HostBinding('class') css: string = undefined; 

  ngOnInit(): void {
    this.changeStyle();
  }

  changeStyle(): void {
    if (/* condition */) {
      // custom behaviour here
      this.css = 'active';
    } else {
      // custom behaviour here
      this.css = undefined;
    }
  }
}

AppOne css

:host.active {
  button {
    background-color: red;
  }
}

AppTwo css

:host:not(.active) {
  button {
    background-color: blue;
  }
}

请注意，我声明了两个 scss 文件，一个用于我想要的每种类型的自定义 scss。我还使用 HostBinding 装饰器来触发激活的样式。

我不更改运行-time 文件，相反，我使用 css 特异性规则仅应用我想要的 css。这是使用 :not() 伪选择器完成的，您可以阅读 here.

我还要补充一点，虽然这是在给定组件中实现更改样式的可行方法，但还有许多其他更好的方法可以在 Angular 应用程序中实现主题等，如果那是你想要达到的目标。

Answer 2

试试这个：在您的 TS 代码中，导入“DomSanitizer”并创建一个方法来更改 styleUrl 变量：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  styleUrl : string = './app.component.css';
  constructor(public sanitizer: DomSanitizer) {
  }

  changeCSSStyle() {
    this.styleUrl = (this.styleUrl === './app.component.css') ? './another.css' : './app.component.css';
  }
}

然后，在您的 HTML 中调用该方法并拥有一个“

<link rel="stylesheet" [href]="sanitizer.bypassSecurityTrustResourceUrl(styleUrl)">
<button (click)="changeCSSStyle()">Change Style</button>

Answer 3

这样不行。这是一个包含两个 css 文件和 ngClass

的简单示例

这里是根据用户交互使组件变亮/变暗。

styleUrls: ['./app.component.light.css', './app.component.dark.css']

样式表-浅色(app.component.light.css)

.light.highlight {
    color: #fff;
    background-color: #000;
}

样式表 - 深色(app.component.dark.css)

.dark.highlight {
    color: #000;
    background-color: #fff;
}

现在为整个组件创建一个基础包装器div

<div [ngClass]="isLight ? 'light': 'dark'">
    <!--component content goes here-->
</giv>

如果您改用 scss，则可以像在 html

中使用的那样使用包装器

.light {
    // page styles go here
}

Angular 从组件内部更改 styleUrls 值

Angular change the styleUrls value from inside the component

angular

angular12