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

Question

我正在尝试为我的网站构建一个功能，让用户可以根据他们的需要更改网站的主题。刚开始，我想保留“深色主题”。所以，我试图单独实现深色主题。

如您在上面的屏幕截图中所见，打开了一个模式，用户可以在其中单击深色主题并更改网站的颜色。此模态组件称为 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 的文件，主题进程将在其中运行。但是我的代码不起作用。

主题.js

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

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

注意 - 我没有在我的元素中使用 Angular Material 2。因此，我必须在不使用 Angular Material 2 的情况下实现为用户提供主题的功能。

Answer 1

当您使用 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;
}

自定义组件.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>

注意点击绑定(bind)的完成方式:(click)="darkTheme()"。接下来，您可以将相同的 ThemeService 注入(inject)您的 ResultsComponent 并根据需要使用 themeColor 字段。

例如:结果.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 是个好主意，因为它们会显着简化您的主题定义。