Question

我正在尝试一个角度应用程序，用户可以从下拉列表中选择主题，并使用this教程

更改应用程序的外观

我正在使用：host-context

但主题没有加载，我不确定它有什么问题。以下是代码

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div [ngClass]="theme">
  <nav class="navbar fixed-top navbar-light justify-content-center headerColor">
    <a class="navbar-brand" href="#">Socxo Themes</a>
  </nav>
  <div class="content">
    <div class="row topClass">
      <div class="col">
        <select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
          <option value="default">Default</option>
          <option value="one">Theme 1</option>
          <option value="two">Theme 2</option>
        </select>
      </div>


    </div>

  </div>
</div>

app.component.ts

export class AppComponent {
  title = 'app';
  theme = "default";

  setTheme(themeName:string)
  {
    this.theme=themeName;
  }
}

我首先尝试使用导航栏主题

下面的

是app.component.css

@import "./app.component.1.css";
@import "./app.component.2.css";
@import "./app.component.3.css";
.content{

    margin-top:55px;
    text-align: center;
}
.topClass{

    margin-top:70px;
}

.headerColor{
    border:1px solid;
}

在./app.component.1,2,3.css中我添加了主题的css，如下所示

:host-context(.one).headerColor{

    background-color: chocolate;
}
:host-context(.two).headerColor{

    background-color: chocolate;
}
:host-context(.default).headerColor{

    background-color: chocolate;
}

从选择主题变量值更改选择选项但相应的类未加载

任何人都可以指导我......

Answer 1

您的问题的解决方案如下：

<强> 步骤：

将数据成员添加到类中：

classNames="default";

在组件装饰器中添加主机，如下所示：

 @Component({
//Here you need to add host after template property
        host:{    
            '[class]' : 'classNames' 
          }
    })

之后将setTheme功能更改为：

    setTheme(themeName:string)
      {
//here changing the host (classNames) dynamically
      this.classNames=themeName;
      this.theme=themeName;
      }

Answer 2

使用:host-context()是将样式应用于外部主机元素。根据文件：

：host-context（）选择器在组件host元素的任何祖先中查找CSS类，直到文档根目录

在您的情况下，您尝试将样式应用于同一组件内的元素。您可以通过执行以下操作来完成此操作，

创建导航组件并将导航条形码移动到该组件。

将导航组件的主题样式放在该组件的样式表

中

`@import "../app.component.1.css";
 @import "../app.component.1.css";
 @import "../app.component.2.css";`

将您的appComponent.html更改为以下内容，

<div [ngClass]="theme">
  <nav-comp></nav-comp>
  <div class="content">
    <div class="row topClass">
      <div class="col">
        <select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
          <option value="default">Default</option>
          <option value="one">Theme 1</option>
          <option value="two">Theme 2</option>
        </select>
      </div>
    </div>
  </div>
</div>

现在您的代码将与:host-context()一起使用，但请记住函数后面的空格，否则它将无效:host-context(.one) .headerColor。在上面的代码中，您的函数后面没有空格。

如果您只想更改导航栏的颜色，您只需更改所有主题样式表，如下所示，

.one .headerColor{

  background-color: chocolate;
}
.two .headerColor{

  background-color: chocolate;
}
.default .headerColor{

  background-color: chocolate;
}

根据角度应用程序中的用户输入加载主题

2 个答案: