javascript – 使用Renderer和ElementRef修改组件

2023年2月16日 175次阅读

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动态插入ChildComponents(已授予,这可以在没有DynamicContentLoader的情况下完成).

ChildComponents应该动态添加css属性,在这种情况下,一旦显示动画延迟.因此,基于孩子的索引,动画延迟增加.

但是,渲染器的修改不会生效,css属性在运行时不存在.

最佳答案 我试图重现你的问题.事实上,我有问题添加像-webkit-animation-delay和animation-delay这样的样式.

如果我尝试使用其他类似颜色的样式,它可以正常工作,并且在运行时会考虑样式.

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.

希望它能帮到你,
蒂埃里

点赞