javascript - 如何在 Angular 2中链接元素？

我正在尝试为我的网站构建一个功能，在该功能中，我向用户提供了根据他们更改网站主题的功能。刚开始，我想保留“黑暗主题”。因此，我尝试单独实现深色主题。


如您在屏幕快照中的上方所示，将打开一个模式，用户可以在其中单击深色主题并更改网站的颜色。该模式组件称为customize.component.html。在后台，您可以看到网站的结果。我称之为results.component.html。

customize.component.ts

<link type="text/javascript" href="../../assets/themes/theme.js" id="theme">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <!-- Start ignoring HTMLLintBear -->
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <!-- Stop ignoring HTMLLintBear -->
      <h2 class="modal-title" id="my-modal-label">Customization</h2>
    </div>
    <div class="modal-body">
      <button class="theme-button" id="dark" onclick="darkTheme(title)">Dark Theme</button>
    </div>
  </div>
</div>

results.component.ts

<!-- Customization modal-box -->
<link type="text/javascript" href="../../assets/themes/theme.js">
<div class="modal fade" id="customization" tabindex="-1" role="dialog" aria-labelledby="myModallabel">
    <app-customize></app-customize>
</div>

这是我对这两个组件的代码片段。我创建了另一个文件名称theme.js，在其中可以进行主题处理。但是我的代码无法正常工作。

theme.js

 function darkTheme(id) {
    var el = document.getElementById(id);
    el.style.color = "red";
}

如何从results.component.ts中获取ID为id的元素？我无法实现该功能。如果有人可以帮助我，那就太好了！谢谢！

注意-我没有在项目中使用Angular Material 2。因此，我必须实现不使用Angular Material 2向用户提供主题的功能。

最佳答案

使用Angular 2时，最好避免使用带有链接标签的纯JavaScript。

您的customise.component.ts文件应包含darkTheme函数。
我坚信您要与其他组件共享所选的颜色=在其他地方使用它。方法之一是使用服务并将数据存储在其中。

export class CustomiseComponent {
    constructor(
        private themeService: ThemeService
    ) {
    }

    darkTheme() {
        this.themeService.themeColor = 'red';
    }
}

@Injectable()
export class ThemeService{
    public themeColor: string;
}

customise.component.html

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <!-- Start ignoring HTMLLintBear -->
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <!-- Stop ignoring HTMLLintBear -->
      <h2 class="modal-title" id="my-modal-label">Customization</h2>
    </div>
    <div class="modal-body">
      <button class="theme-button" id="dark" (click)="darkTheme()">Dark Theme</button>
    </div>
  </div>
</div>

请注意单击绑定的完成方式：（click）=“ darkTheme（）”。
接下来，您可以将相同的ThemeService注入到ResultsComponent中，并根据需要使用themeColor字段。

例如：
results.component.ts

export class ResultsComponent {
    constructor(
        public themeService: ThemeService
    ) {
    }
}

results.component.html

<label [style.color]="themeService.themeColor">Your colorful text</label>

这为该问题提供了一种潜在的解决方案，但如果涉及到实际情况，则最好使用CSS类名而不是颜色。

更新资料

以下链接提供了显示如何实现主题化的示例：

https://embed.plnkr.co/PX1kcJAbNmBxTZmAzsiS/

通常，使用LESS或SASS是一个好主意，因为它将大大简化主题定义。

关于javascript - 如何在 Angular 2中链接元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44142559/