為什么 CSS 樣式不適用於帶有 Vaadin 元素的 Angular 2 組件？

Question

我正忙着使用 Angular 2 完成有關 Vaadin 元素的教程，我在這里找到了

https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html

在第 5.3 章中，樣式應用於 app.component.ts 如下

import { Component } from [email protected]/core';

@Component({
  selector: 'my-app',
  template: `
    <app-header-layout has-scrolling-region>
      <app-header fixed>
        <app-toolbar>
          <div title spacer>All heroes</div>
        </app-toolbar>
      </app-header>
      <div>My application content</div>
    </app-header-layout>
  `,
  styles: [`
    app-toolbar {
      background: var(--primary-color);
      color: var(--dark-theme-text-color);
    }
  `]
})
export class AppComponent { }

樣式中的變量不會應用到組件中，但是當我將顏色更改為紅色或藍色時，如下所示：

app-toolbar {
      background: red;
      color: blue;
    }

它實際上有效，這意味着找不到變量。

我去了 index.html 並看到有一個樣式應用於 body 標簽，它也有變量。

  <!-- Styles -->
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="bower_components/paper-styles/color.html">
  <link rel="import" href="bower_components/paper-styles/default-theme.html">
  <link rel="import" href="bower_components/paper-styles/typography.html">
  <link rel="import" href="bower_components/paper-styles/shadow.html">
  <style is="custom-style">
    body {
      @apply(--layout-fullbleed);
      @apply(--paper-font-body1);
    background: var(--primary-background-color);
      color: var(--primary-text-color);
    }
  </style>

雖然這些變量實際上是被發現和應用的。 我通過換出另一個變量來測試它，如下所示：

 <style is="custom-style">
        body {
          @apply(--layout-fullbleed);
          @apply(--paper-font-body1);
          background: var(--paper-pink-a200);
          color: var(--primary-text-color);
        }
      </style>

這個變量將背景變成粉紅色並且實際起作用。

這些變量主要存在於 color.html 和 default-theme.html 中，初始化如下

默認主題.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="color.html">

<style is="custom-style">

  :root{
    --primary-text-color: var(--dark-theme-text-color);
    --dark-theme-text-color: #ffffff;
    --primary-color: var(--paper-indigo-500);
</style>

顏色.html

<link rel="import" href="../polymer/polymer.html">

<style is="custom-style">
    --paper-indigo-500: #3f51b5;
    --paper-pink-a200: #ff4081;
</style>

出於某種原因，變量被應用到 index.html 而不是 app.component.ts，我一步一步地跟着教程。 你能幫我解決這個問題嗎？

編輯：還添加了"emitDecoratorMetadata": true作為我的代碼作為注釋（由於某種原因已被刪除），並且在我的 Crome 控制台中沒有關於此問題的錯誤或任何警告。 如果有什么額外的你需要問，我會提供

Answer 1

Angular 不支持 CSS 變量和 mixin。 這是一個 Polymer 功能，僅適用於 Polymer 元素。

作為一種解決方法，您可以嘗試創建一個包裝 Polymer 元素，您可以在其中放置樣式並使用該 Polymer 包裝元素包裝 Vaadin 元素。