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

Question

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

results.component.html

SOME_VAR=13434
ANOTHER_VAR=BlAH BLAH BLAH

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

theme.service.ts

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

theme.component.scss

export class ThemeService {

  public themeClass: string = 'default';

  constructor() { }

}

theme.component.ts

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

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

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