web-dev-qa-db-fra.com

Passer le contexte au modèle via ngOutletContext dans Angular2

J'ai un composant auquel je passe un modèle. À l'intérieur de ce composant, je voudrais passer le contexte pour pouvoir afficher les données.

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

Maintenant, lorsque vous utilisez un composant à l'intérieur d'un autre composant:

<my-component>
    <template>
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

Donc dans my-component Je passe un modèle qui est géré dans sa classe par @ContentChild Avec le nom templ.

Ensuite, dans le modèle de my-component, Je passe templ à ngTemplateOutlet et en plus, je passe le contexte en utilisant ngOutletContext qui a isVisible défini sur true.

nous devrions voir yes! à l'écran mais il semble que le contexte ne soit jamais passé.

Ma angular:

"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
javascriptangulartypescriptangular2-templateangular2-directives
13
Tukkan

Après un long moment, je l'ai fait.

Exemple avec une seule valeur:

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

<my-component>
    <template let-isVisible="isVisible">
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

Exemple avec boucle:

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <div *ngFor="let element of data">
        <template [ngTemplateOutlet]="templ" [ngOutletContext]="{element: element}">
        </template>
    </div>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){
        this.data = [{name:'John'}, {name:'Jacob'}];
    }
}

--- 

<my-component>
    <template let-element="element">
        {{element.name}}
    </template>
</my-component>

Résultat:

<div>John</div>
<div>Jacob</div>
28
Tukkan

Attention ngOutletContext est obsolète et renommé ngTemplateOutletContext.

Rechercher dans le journal des modifications "NgTemplateOutlet # ngTemplateOutletContext"

JOURNAL DES MODIFICATIONS

7
Acker Apple