如何链接角度2中的元素？

Question

我正在尝试为我的网站构建一个功能，我可以根据这些功能为用户提供更改网站主题的功能。刚刚开始，我想保持“黑暗主题”＃39;所以，我试图分别实施黑暗主题。

正如您在屏幕截图中看到的那样，打开了一个模态，用户可以在其中单击黑暗主题并更改网站的颜色。此模态组件称为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-process工作的地方创建了另一个文件名theme.js。但我的代码不起作用。

theme.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;
}

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>

注意点击绑定的完成方式:(点击）=＆＃34; darkTheme（）＆＃34;。 接下来，您可以将相同的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是一个好主意，因为它会显着简化您的主题定义。