Angulaire 2 Lire Plus Directive
J'ai besoin de construire une readmore directive Angular2. Ce que cette directive n'est pour réduire et développer les longs blocs de texte avec "en savoir plus" et "fermeture" des liens. Non pas sur la base du nombre de caractères, mais sur la base de la hauteur max.
<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>
Quelqu'un peut s'il vous plaît guide quel serait le moyen le plus fiable pour obtenir/définir la hauteur de l'élément pour ce cas précis.
Des directives sur la façon dont cette directive spécifique pourrait être mis en œuvre serait également très apprécié.
J'ai besoin de construire quelque chose comme ça https://github.com/jedfoster/Readmore.js
Solution:
Avec l'aide de Andzhik je suis en mesure de construire le ci-dessous composant qui répond à mes exigences.
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'read-more',
template: `
<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
</div>
<a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
`,
styles: [`
div.collapsed {
overflow: hidden;
}
`]
})
export class ReadMoreComponent implements AfterViewInit {
//the text that need to be put in the container
@Input() text: string;
//maximum height of the container
@Input() maxHeight: number = 100;
//set these to false to get the height of the expended container
public isCollapsed: boolean = false;
public isCollapsable: boolean = false;
constructor(private elementRef: ElementRef) {
}
ngAfterViewInit() {
let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
//collapsable only if the contents make container exceed the max height
if (currentHeight > this.maxHeight) {
this.isCollapsed = true;
this.isCollapsable = true;
}
}
}
Utilisation:
<read-more [text]="details" [maxHeight]="250"></read-more>
Si il pourrait y avoir des améliorations, n'hésitez pas à suggérer.
OriginalL'auteur Naveed Ahmed | 2016-06-14
Vous devez vous connecter pour publier un commentaire.
Je pense que vous aurez besoin d'un
Component
plutôtDirective
.Components
a plus de sens car vous avez besoin pour ajouter Lire plus bouton/lien, c'est à dire la mise à jour du DOM.Utilisation:
Vous pouvez utiliser
ElementRef
ngcourse.rangle.io/handout/advanced-components/elementref.html pour accéder directement à l'élément DOM représentant votreComponent
. PS: si vous êtes satisfait de ma réponse, veuillez accepter, merci.J'ai essayé mais lorsque je me connecte sur la console dans le constructeur ou dans ngAfterContentChecked il retourne undefined console.journal(ce.el.nativeElement.hauteur); j'ai aussi essayé @HostBinding('style.hauteur') hauteur: string; mais il est aussi défini.
Regarde comme la meilleure du cycle de vie des crochets
ngAfterViewInit
et vous avez besoin pour obtenirthis.el.nativeElement.offsetHeight
au lieu de...height
.height
est un membre de " ce.el.nativeElement.style " et n'a pas de valeur à ce point.Merci beaucoup Andzhik vous avez été très utile, j'ai posté ma dernière lecture de plusieurs composantes ci-dessous, veuillez indiquer si il peut y avoir des améliorations.
OriginalL'auteur Andrei Zhytkevich
J'ai fait une version qui utilise des caractères de longueur plutôt que la taille de la div.
Utilisation:
Ce contenu avec des balises html?
je pense qu'il devrait travailler avec le format html. C'est à l'aide de [innerHTML] directive
bonjour, le bouton
read less
apparaissent encore lorsque le nombre de mots est à moins de 100.. aussi pouvons-nous avoir de l'animation pour développer et réduire ! comment fairestackoverflow est destinée à répondre à des questions, ne pas répondre aux demandes de fonctionnalités, comme github. Si vous souhaitez ajouter ces fonctionnalités, il vraiment ne devrait pas être difficile à mettre en œuvre les changements que vous voulez. Cela dit, si vous voulez que ces fonctionnalités ont été ajoutées, ill vous donner mon compte paypal et vous pouvez me faire parvenir 200 $et je vais voir ce que je peux faire 🙂
OriginalL'auteur jugg1es
Avec l'aide de Andzhik je suis en mesure de construire le ci-dessous composant qui répond à mes exigences.
Utilisation:
OriginalL'auteur Naveed Ahmed
et l'utilisation
<read-more [text]="this is test text" [maxLength]="10" [showToggleButton]="true"></read-more>
OriginalL'auteur Ipe Himanshu
Si vous souhaitez afficher le texte sur le nombre maximum de caractères sans avoir à couper un mot, modifiez cette ligne de code:
:
OriginalL'auteur D.B
Juste une légère amélioration de @Andrei Zhytkevich code
(utile pour les démarques)
Utilisation
OriginalL'auteur Whisher
Merci, je l'ai changé un peu pour qu'il soit sur NgOnInit en raison de l'erreur de la console.
Il y a une légère modification et fonctionne bien avec Angulaire 6.
Comme vous pouvez le voir j'ai changé l'
const current Height = document.getElementById('textCollapse').offsetHeight;
OriginalL'auteur tommyshere
De nouveau, j'ai résolu ces types de problème avec des données dynamiques et le plein contrôle de gestion.
Ici , personalBasicModel.professionalSummary contenir chaîne . comme n'importe quel texte.
tranche:0:200 = utiliser la tranche de tuyau pour l'épissure de la chaîne avec 200 caractères de longueur . vous pouvez changer la longueur en fonction de votre exigence.
id="points", & id="plus" deux choses importantes.
Ici, nous définissons un bouton avec texte dynamique (voir plus et moins ) avec cliquez sur l'événement.
//---------------------------------- fichier ts -----------------------------------//
Définir la variable
showLess_More : string = "en savoir PLUS...";
paasValueOn_SeeMoreBtn : boolean = true;
Événement(Méthode de) feu lorsque l'utilisateur de cliquer sur voir plus de bouton
OriginalL'auteur nagender pratap chauhan