javascript - 使用 Renderer 和 ElementRef 修改组件

Question

1 期

---

我正在尝试实现以下内容:

我有一个容器组件 ContainerComponent 和子组件 ChildComponent。我想通过控制 ContainerComponent 修改子组件的呈现和整体行为。

---

2 使用的技术

---

Angular2、HTML、CSS、Javascript、Typescript、ES6

---

3 代码

---

ContainerComponent.ts

export class ContainerComponent {

    children: Array<Child>;

    constructor(
        private _el: ElementRef,
        private _dcl: DynamicComponentLoader,
        private _childService: ChildService) {

    }

    ngOnInit() {

        let index = 0; // index of child component in container
        this._childService.getChildren().then( // get the children models
            (children) => {

                this.children = children; 
                this.children.forEach((child, index) => {
                    this._dcl.loadIntoLocation(ChildComponent, this._el, 'dynamicChild')
                    .then(function(el){
                        el.instance.child = child; // assign child model to child component
                        el.instance.index = index;
                    });
                });

            }
        );

    }

}

ChildComponent.ts

export class ChildComponent {

    child: Child;
    index: number;

    constructor(private _renderer: Renderer, private _el: ElementRef) {
    }

    ngOnInit() {

        let delay = (this.index + 1) * 0.5; // calculate animation delay
        this._renderer.setElementStyle(this._el, '-webkit-animation-delay', delay + 's !important');
        this._renderer.setElementStyle(this._el, 'animation-delay', delay + 's !important');

    }

}

---

4 代码解释

---

在上面的代码中，ContainerComponent 动态插入 ChildComponent(当然，这可以在没有 DynamicContentLoader 的情况下完成)。

ChildComponents 应该动态添加 css 属性，在这种情况下，动画一旦显示就会延迟。因此，根据 child 的索引，动画延迟会增加。

但是来自渲染器的修改不会生效，css 属性在运行时不存在。

Answer 1

我试图重现你的问题。事实上，我在添加 -webkit-animation-delay 和 animation-delay 等样式时遇到了问题。

如果我尝试使用另一种样式，如 color，它工作正常，并且在运行时会考虑该样式。

ngOnInit() {
    this._renderer.setElementStyle(this._el, 'color', 'yellow');
}

所以它似乎与动画样式有关...我看到这些链接可能会让您感兴趣:

• How to set CSS3 transition using javascript?
• http://www.javascriptkit.com/javatutors/setcss3properties.shtml

否则，似乎在 Angular2 中有一些对动画的支持，但它并没有真正的记录......参见这个文件:https://github.com/angular/angular/blob/master/modules/angular2/src/animate/animation.ts .

希望对你有帮助，蒂埃里