Angular2 : passer une variable string à l'application

NoTra
Javascript

Bonjour,

Tout d'abord, bonjour à tous (premier message).

Je commence à utiliser Angular2 sur un site développé en Symfony2, et je dois avouer que je suis tombé sur un os lorsque j'ai souhaité passer à mon application une simple string. L'idée est de passer à l'application NG2 l'URL qu'il devra appelé pour récupérer les données de SF2. Je souhaiterais lui passer en écrivant dans twig :

<my-app urlDatas="'{{ path('monPathQuivaBien') }}'"></my-app>

Or je suis incapable de faire passer cette variable à mon AppComponent.
Est ce possible ?

Le code est ici sur Plunker : http://plnkr.co/edit/I2Dfdo10gIY1G3MxA5kD?p=preview

Merci pour toute l'aide que vous pourrez m'apporter.

2 réponses

NoTra
Auteur
Réponse acceptée

J'ai enfin trouvé un forum parlant de ce problème.
https://github.com/angular/angular/issues/1858

C'est visiblement une limitation de Angular2, et corriger ce problème pourrait rimer avec une perte de performance. Je travaille sur un petit work around et le posterai ici sous peu.

NoTra
Auteur
Réponse acceptée

Donc voici un petit trick qui fait l'affaire en restant propre.

index.html

...
<my-app params="ma-string">Loading...</my-app>
...

app.component.ts

import { Component, ElementRef } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `{{params}}`
 })

export class AppComponent {
    params: string;
    constructor (public elementRef: ElementRef) {
        var native = this.elementRef.nativeElement;
        this.params = native.getAttribute("params");
    }
}

En gros, le component ElementRef permet d'accéder au DOM réel. On va donc lire l'attribut "params" de la balise <my-app> dans le DOM, et le stocker en propriété de la classe AppComponent. (à noter que vous n'êtes donc plus obliger d'écrire " ' ma-chaine ' " avec des ', vu qu'on lit maintenant le DOM).

Plunker ici