Question

我是网络新手，对不好的英语抱歉。但我有疑问。

我想使用数据绑定更改Polymer的app-header元素背景图像。我想在路由器页面改变时显示不同的标题图像。但是这段代码不起作用。我不知道如何挑选和操纵背景图像的CSS。

<style>
    ...
    --app-header-background-front-layer: {
        /*This line is working*/
        /*background-image: url(/images/tmp/header_image_1.png);*/

        /*This line is NOT working*/
        background-image: url([[headerImageUrl]]);
        background-position: left center;
    };
    ...
</style>

<script>
    ...
    properties: {
        ...
        headerImageUrl: {
            type: String,
            value: "/images/tmp/header_image_1.png"
        }
        ...
    },
    ...
<script>

我得到了解决方案。 Niklas Lang给了我一个暗示。这是我的代码。

<style>
    ...
    :host {
        ...
        /*this custom css property could be changed whenever I want */
        --header-image: url(/images/tmp/header_image_1.png);
        ...
    }
    ...
    --app-header-background-front-layer: {
        background-image: var(--header-image);
        background-position: left center;
    };
    ...
</style>

<script>
    ...
    // this function called when router's page value is changed.
    setHeader: function () {
        switch (this.page) {
            case blabla1:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_1.png)';
                this.updateStyles();
                break;
            case blabla2:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
                this.updateStyles();
                break;
            case blabla3:
                this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
                this.updateStyles();
            default :
                break;
        }
    },
    ...
<script>

Answer 1

我认为你错过了你风格中的实际元素当您使用Polymer mixin时，您应该将它应用于相应的Element，在您的情况下是app-header。

app-header {
  --app-header-background-front-layer: {
    background-image: url();
  };
}

但是，我不确定是否有可能绑定你的风格您可以尝试绑定到内联样式在Polymer文档中，他们称之为Bind to a target attribute

<div style$="color: {{myColor}};">

但是在你的情况下，我并不完全确定这应该如何工作，因为你正在应用mixin而不仅仅是一个样式值。

使用数据绑定

1 个答案: