如何使用两个不同的组件使用NgClass指令更改Angular 2中的主题？

我正在尝试在Angular 2项目中构建一个主题功能。但是面临一些问题。首先让我分享一下代码片段-

results.component.html

<div class="row" [ngClass]="themeService.themeClass" class="theme-content">
    <div *ngFor="let item of items$|async" class="result">
        <div class="title">
            <a class="title-pointer" href="{{item.link}}">{{item.title}}</a>
        </div>
        <div class="link">
            <p class="theme-link">{{item.link}}</p>
        </div>
        <div class="description">
            <p class="theme-description">{{item.pubDate|date:'MMMM d, yyyy'}} - {{item.description}}</p>
        </div>
    </div>
</div>

<button type="button" (click)="themeService.themeClass='dark'">Dark Theme</button>
<button type="button" (click)="themeService.themeClass='default'">Default Theme</button>

theme.component.scss

.theme-content.dark {
    *{
        background-color: #000000;
    }

    .title-pointer {
        font-family: Arial, sans-serif;
        font-size: 12px;
    }
}

theme.component.ts

export class ThemeComponent implements OnInit {

  constructor(
    public themeService: ThemeService
  ) { }

  ngOnInit() {
  }

}

---

正如您所看到的，有两个不同的组件：在results组件中，正在获取结果。在主题组件中，它将动态地改变主题。但我不知道为什么它会给我错误？我应该如何解决这个问题，使主题功能能够与结果的组件一起工作？

如果它给了您一个错误，那么读取它是第一步。你没有发布，所以我们无法帮助你阅读。但无论如何，组件的CSS规则适用于该组件，而不适用于其他组件。但错误到底是什么？

export class ThemeComponent implements OnInit {

  constructor(
    public themeService: ThemeService
  ) { }

  ngOnInit() {
  }

}