Question

我正在尝试在我的角度应用程序中包括两个样式URL，

我尝试了其他几个类似的问题，但是答案对我不起作用。我不知道如何解决。

我要实现的是根据if条件在两种样式之间切换

为什么要这样做：这是因为该应用程序应支持两种语言，而这两种语言要求同一组件具有RTL和LTR样式文件，

是否可以处理此类问题？

Answer 1

为.html中的[class]指定一些功能

<span [class]="getStyleClass()">ABCD</span>

，然后在.ts中添加一些逻辑到您的getStyleClass（）

getStyleClass() {
    return this.value > this.anotherValue?"classOne":"classTwo";
  }

Answer 2

有2个CSS文件：src / assets / style1.css 和src / assets / style2.css

步骤-1 ：添加一个链接，该链接的ID位于 index.html 文件
的头部

<html>
  <head>
    <link href="" id="mycss" rel="stylesheet">
  </head>
  <body>
    <my-app></my-app>
</body>
</html>

步骤-2 ：使用以下打字稿并根据自己的逻辑进行修改

import { Component, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  files = ["assets/style1.css","assets/style2.css"]

  constructor(@Inject(DOCUMENT) private document) {}

  toggle() {

    var oldlink = this.document.getElementById("mycss");

    var newlink = this.document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", this.files[1]);

    this.document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
  }
}

在同一组件的两种样式之间切换

2 个答案: