为什么CSS样式不适用于带有Vaadin元素的Angular 2组件？

Question

我忙用角2，我发现这里

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

在第5.3章做对Vaadin元素教程，样式应用到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，看到有一个风格被应用到身体标签也有变量。

<!-- 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和默认theme.html和被初始化为遵循

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

color.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我的代码为注释（而此前因为某种原因被删除）建议，在我克罗姆控制台没有错误，也没有对这个问题的任何警告。如果有什么额外的东西需要询问，我将提供

Answer 1

Angular不支持CSS变量和mixin。 这是聚合物功能，只适用于聚合物元素。

作为一种解决方法，您可以尝试创建一个包装聚合物元素，在其中放置样式并用该聚合物包装元素包装Vaadin元素。