我正忙于使用我在此处找到的 Angular 2 编写有关 Vaadin 元素的教程
https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html
在 5.3 章节中,Styles 应用到 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 控制台中没有关于此问题的错误或警告。如果有什么额外的你需要问,我会提供
最佳答案
Angular 不支持 CSS 变量和混合。 这是 Polymer 的一个特性,只适用于 Polymer 元素。
作为解决方法,您可以尝试创建一个包装器 Polymer 元素,您可以在其中放置样式并使用该 Polymer 包装器元素包装 Vaadin 元素。
关于html - 为什么 CSS 样式不适用于具有 Vaadin 元素的 Angular 2 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41677947/