Angulaire 2 en passant html de ng-contenu avec fixations
Je suis en train d'écrire angulaire de composants pour la fondation framework css. Je suis en train de travailler sur les pattes du composant, et que vous voulez être en mesure de passer le code HTML de la <ng-content>
de cette.
Le problème c'est que j'ai aussi besoin de passer du html que l'utilisateur peut mettre liaisons, comme ceci:
MODÈLE PARENT
<tabs [data]='example'>
<div> Age <br> {{item.age}} </div>`
</tabs>
ONGLETS COMPOSANT
<ul class="tabs" #tabs>
<li *ngFor="let item of data | async" (click)="tabClick($event)">
<a>{{item.name}}</a>
</li>
</ul>
<div>
<ng-content></ng-content>
</div>
ONGLETS TAPUSCRIT
@Component({
selector: 'tabs',
templateUrl: './tabs.component.html'
})
export class TabsComponent {
@Input('data') data:any;
@ViewChild('tabs') tabs: ElementRef;
}
Où item
est une référence à un objet dans la example
tableau.
Cependant, j'ai cette erreur:
Cannot read property 'name' of undefined
comme item
est en cours d'évaluation avant de les insérer dans le <ng-content>
directive.
Est-il un moyen de contourner cette limitation, ou je suis aller sur ce de la mauvaise façon?
ng-content
vous pouvez voir ce answer êtes-vous à l'aide de ng2-bootstrap onglets ou de la conception des matériaux. vous pouvez aussi consulter la la Conception de Matériel pour les onglets exemple.Je ne suis pas en utilisant l'un de ces, je suis en train d'écrire des composants personnalisés et des directives de la fondation 6 qui n'existent pas encore, que je préfère ce cadre. Selectedindex paraît utile, mais pas pour ce problème!
quel est votre problème exact? où en êtes-vous à l'aide de
ng-content
? à l'intérieur de la coutume ou de la composante principale? Qui est le parent et l'enfant?J'ai ajouté le fichier d'enregistrement pour essayer et rendre les choses plus claires
Ce qui ne peut pas travailler dans votre code que vous utilisez
item
à l'extérieur de *ngFor
, donc l'accès item in
<ng-contenu> " ne peut pas fonctionner. Je trouve que c'confus ce que vous essayez d'accomplir de penser à une bonne solution.OriginalL'auteur userqwert | 2017-03-18
Vous devez vous connecter pour publier un commentaire.
mise à jour Angulaire 5
ngOutletContext
a été renomméngTemplateOutletContext
Voir aussi https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
ngTemplateOutlet
oungForTemplate
peut être utilisé pour ce cas d'utilisation:Voir aussi Angulaire 2 lier transcluded contenu de variable de boucle
ngTemplateOutletContext
semble êtrengOutletContext
sur ma version. Avait pour déplacer quelques boucles autour de vous et changer quelques noms de variable, mais il fonctionne très bien. Grâce Günter 🙂Merci pour les commentaires. J'ai vu qu'ils ont changé, mais probablement seulement pour la version 4.0
un excellent tutoriel: blog.angulaire de l'université.io/...
dans angulaire 4.0+
template
a changé deng-template
merci beaucoup pour l'astuce 🙂
OriginalL'auteur Günter Zöchbauer
Vous devriez être en utilisant de cette façon, au lieu de cela,
Composant tapuscrit
Dans votre contenu de projection définir un sélecteur de
Que votre passage avec des liaisons
DÉMO
OriginalL'auteur Aravind
Vous avez besoin pour passer à l'élément objet de la ng-composant de contenu.
Je ne suis pas certain sur ce qui se cache derrière l'onglet cliquez sur l'événement, mais vous pouvez assigner l'élément objet de selectedTab qui seront passés au composant.
Le composant qui contrôle l'onglet de la vue peut avoir les suivantes:
Et cela va passer de l'objet lorsque vous cliquez sur. J'ai peut-être attaquer ce sous un mauvais angle, mais peut-être qu'il va vous aider d'une certaine façon.
OriginalL'auteur Ben Gummelt