小编Int*_*lia的帖子

Polymer自定义元素属性访问或发送

我正在寻找一种方法来从DOM访问Polymer自定义元素的属性,或者将数据从Polymer.register发送到DOM.

下面这个非常简单的元素采用两个值并将它们相乘,将结果放在其result属性中.

如何从外部访问此结果？

<element attributes='value times result' name='value-box'>
  <template>
    <p>{{result}}</p>
  </template>

  <script>
    Polymer.register(this, {
      ready: function() {
        if (this.value != null && this.times != null) {
          this.result = this.value * this.times;
        }
      }
    });
  </script>
</element>

Run Code Online (Sandbox Code Playgroud)

shadow-dom polymer

szy*_*ski

2018 01-10

2
推荐指数

1
解决办法

6787
查看次数

我应该如何在Angular 4中的组件的HTML模板中使用Service中的BehaviorSubject类？

我有一个用于身份验证的服务,它暴露了BehaviorSubject类的用户.我想在组件中使用该服务来允许登录/注销并显示用户属性....那里没什么新东西.

我知道我可以订阅组件中的用户对象并将结果分配给本地对象,而本地对象又将在视图中使用.但我有兴趣知道如何使用它而无需订阅打字稿,但直接在html中,感谢异步管道,我想.

这些是我将使用的伪类:

Auth服务

export class User {
    id: string;
    username: string;
    gender: string;

    constructor( some params...) {
        // set all the attributes...
    }
}


@Injectable()
export class AuthService {

    private _currentUser: BehaviorSubject<User> = new BehaviorSubject(null);
    get currentUser() {
        // do some logic here if needed
        return this._currentUser;
    }

    constructor() {}

    login(email, password)  {
        DoSomeHttpRequestToLogin()
        .then( userParams => {
            const user = new User(userParams);
            this._currentUser.next(user);
            })
        .catch(error => {});
    }   
}

Run Code Online (Sandbox Code Playgroud)

组件

@Component({
    selector: 'app-main',
    templateUrl: './main.component.html'
})
export class …

Run Code Online (Sandbox Code Playgroud)

service typescript firebase-authentication angular

Pat*_* M.

2017 11-10

2
推荐指数

1
解决办法

2304
查看次数

如何在 Web 组件中使用子元素

我正在构建用于教育目的的普通 Web 组件。这是我的自定义复选框。

class Checkbox extends HTMLElement {
    constructor() {
        super();
        this.shadow = this.attachShadow({mode:'open'});
        this.shadow.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path /></svg><label></label>";
        this._checked = false;

        this.addEventListener("click", this.onClickHandler.bind(this));
    }

    set checked(value) {
        if(value != this._checked) {
            this._checked = value;
            this.update();
        }
    }

    get checked() {
        return this._checked
    }

    onClickHandler(event) {
        this.checked = !this.checked;
    }

    update() {
        let svg = this.shadow.querySelector("svg");

        if(this._checked)
            svg.querySelector("path").setAttribute("d", "M19 0h-14c-2.762 0-5 2.239-5 5v14c0 2.761 2.238 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-8.959 17l-4.5-4.319 1.395-1.435 3.08 …

Run Code Online (Sandbox Code Playgroud)

javascript web-component native-web-component

yas*_*sar

2018 04-12

2
推荐指数

1
解决办法

4090
查看次数

Polymer 2.0自定义事件处理

所以我想从子元素调度自定义事件.

<dom-module id="layout-dashboard">
<template>
    <style></style>

</template>
    <script>
        class LayoutDashboard extends Polymer.Element {
        connectedCallback() {
            this.dispatchEvent(new CustomEvent('kick-start', {detail : {}, bubble: true, composed : true}))
        }
    }
    </script>
</dom-module>

Run Code Online (Sandbox Code Playgroud)

然后从父级处理事件.

<dom-module id="layout-parent">
    <template>
        <style></style>
        <layout-dashboard on-kick-start="handleKick"></layout-dashboard>
    </template>
    <script>
        class LayoutParent extends Polymer.Element {
            handleKick(){
                console.log("test");
            }
        }
    </script>
</dom-module>

Run Code Online (Sandbox Code Playgroud)

知道为什么handleKick()不执行？

polymer polymer-2.x

Dim*_*rio

2017 12-03

1
推荐指数

1
解决办法

1830
查看次数

创建和使用自定义 HTML 组件？

我有以下本地 html：

<html>

<head>
  <link rel="import" href="https://mygithub.github.io/webcomponent/">
</head>

<body>
  <!-- This is the custom html component I attempted to create -->
  <img-slider></img-slider>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

以及对模板的以下尝试：

<template>
  <style>
      .redColor{
        background-color:red;
      }
  </style>
  <div class = "redColor">The sky is blue</div>
</template>

<script>
  // Grab our template full of slider markup and styles
  var tmpl = document.querySelector('template');

  // Create a prototype for a new element that extends HTMLElement
  var ImgSliderProto = Object.create(HTMLElement.prototype);

  // Setup our Shadow DOM and clone the template
  ImgSliderProto.createdCallback = …

Run Code Online (Sandbox Code Playgroud)

html javascript css templates web-component

VSO*_*VSO

2017 11-22

1
推荐指数

1
解决办法

1019
查看次数