使用Renderer和ElementRef修改组件

Question

1 ISSUE

---

I am trying to implement the following:

I have a container component ContainerComponent and child components ChildComponent . I want to modify the rendering and overall behaviour of the child components via the controlling ContainerComponent .

---

2 TECHNOLOGIES USED

---

Angular2 , HTML , CSS , Javascript , Typescript , ES6

---

3 CODE

---

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 CODE EXPLANATION

---

In the above code, the ContainerComponent dynamically inserts ChildComponent s (granted, this could be done without the DynamicContentLoader ).

The ChildComponents should dynamically add css properties, in this case, the animation delay once it is displayed. So based on the index of the child, the animation delay increases.

However the modifications from the renderer do not take effect, the css properties are not there at runtime.

Answer 1

I tried to reproduce your problem. In fact, I have problem to add styles like -webkit-animation-delay and animation-delay .

If I try with another style like color , it works fine and the style is taken into account at runtime.

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

So it seems to be linked to animation styles... I see these links that could interest you:

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

Otherwise it seems that there is some support for animation in Angular2 but it's not really documented... See this file: https://github.com/angular/angular/blob/master/modules/angular2/src/animate/animation.ts .

Hope it helps you, Thierry

Answer 2

This seems to be a bug in angular2 itself. Adding !important to a style will result in an illegal value to the style and it is not applied to the element. The correct way in plain js is to use another parameter which implies if the style is important.

So the correct answer is to use:

this._renderer.setElementStyle(this._el, 'animation-delay', delay + 's'); //sans !important

and if you want to add !important you have to use:

this._el.nativeElement.style.setProperty('animation-delay', delay + 's', 'important');

The -webkit- prefix gets added (or removed) if necessary, so there is no need to add that as well

Answer 3

From here:

https://angular.io/docs/ts/latest/api/core/ElementRef-class.html

You should only use ElementRef as an absolute last resource. The whole idea of Angular 2 is that you don't have to mess with the dom at all. What you are trying to do can be acomplished very easy using a template:

import {NgStyle} from 'angular2/common';
import {Component} from "angular2/core";

@Component({
    selector: 'app',
    template: `
        <div *ngFor="#child of children; #i = index">
            <div [ngStyle]="{ 'z-index': i * multiplier,
                                '-webkit-animation-delay': i * multiplier + 's',
                                 'animation-delay': i * multiplier + 's' }"> {{i}} - {{child}} </div>
        </div>
    `,
    directives: [NgStyle]
})
export class AppComponent{
    public children:string[] = [ "Larry", "Moe", "Curly" ];
    public multiplier:number = 2;
}

Depending on the browser you might see those css properties or not, that's why I added the z-index which is more common and old so you can see you can render the css value dynamically using the index variable from ngFor inside a template.

I hope this helps !