Angular implémente un composant de liste pliante bidirectionnelle

Cet article présente principalement l'exemple de code pour implémenter le composant de liste pliante bidirectionnelle dans Angular. Il est divisé en deux groupes, les groupes gauche et droit, qui ont une certaine valeur de référence. J'espère qu'il pourra s'y référer. aider tout le monde.

Je travaille actuellement sur un composant de pliage bidirectionnel, comme le montre la figure ci-dessous. La page est divisée en deux groupes. La page de gauche est le panneau Résumé, qui est principalement un ensemble de listes. La page de droite est le panneau de détails, qui affiche un certain élément dans la liste de gauche. Les informations spécifiques de l'élément sont enregistrées comme « État intermédiaire ».

Nous voyons également qu'il y a deux ensembles de boutons "<" et ">". . Cliquez sur "<" à gauche, le panneau de résumé se réduit et le panneau de détail couvre la page entière. Nous l'enregistrons comme "État de gauche", comme indiqué ci-dessous :

<. 🎜>En résumé Lorsque le panneau est à l'état réduit, cliquez sur ">" pour revenir à "l'état intermédiaire". Cliquez sur ">", le panneau de détail est plié et le panneau de résumé couvre la page entière. Nous l'enregistrons comme "État droit", comme indiqué ci-dessous :

Nous. passer ce qui précède Selon l'analyse de la demande,

1 La disposition générale de la page est un p pour Résumé, deux boutons fléchés et un p pour Détail.

2. La page comporte un total de trois états : "Milieu", "Gauche" et "Droite" et deux boutons : "<" et ">", c'est-à-dire deux boutons vont contrôler trois états.

Il faut donc définir une énumération pour enregistrer les trois états de la page (à noter qu'il faut utiliser l'export pour définir l'énumération, sinon une erreur surviendra plus tard)

export enum CollapseExpandState {
  Middle = 1,
  Left,
  Right
}

La structure de la page est la suivante, et une variable _collapseExpandState est utilisée pour contrôler les boutons "gauche" et "droite". Plus précisément, "<" sera affiché lorsque la page. le statut est "Milieu" et "Droite" apparaît lorsque le statut de la page est "Milieu" et "Gauche". Il peut être connu à partir du diagramme de demande :

<🎜 > Ici, nous utilisons des énumérations dans le modèle Angular et rencontrons quelques problèmes. Si nous définissons l'énumération comme ci-dessus et utilisons l'énumération dans le modèle Angular Component, nous obtiendrons le message d'erreur suivant :

<p id="container">
  <p id="summary"></p>
  <p id="buttons">
    <p id="left" *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Right" (click)="_onHandleLeft($event)">《</p>
    <p id="right"> *ngIf="_collapseExpandState === CollapseExpandState.Middle || CollapseExpandState.Left" (click)="_onHandleLeft($event)">》</p>
  </p>
  <p id="detail"></p>
</p>

TypeError : Impossible de lire la propriété ' Milieu' de undefined

C'est-à-dire que le type d'énumération défini CollapseExpandState ne peut pas être reconnu dans le modèle Angular2. En effet, le modèle de composant angulaire que vous avez écrit est la classe de composant que vous avez définie. mais il n'y a aucune référence à l'énumération CollapseExpandState dans la classe, donc Angular pense que CollapseExpandState n'est pas défini lors de la génération d'un modèle pour votre composant. Connaissant la raison, la solution est simple. Il vous suffit d'ajouter une référence à cette énumération dans la classe du composant :

Nous utilisons le statut d'énumération pour les contrôles. que deux boutons soient affichés ou non dans l'état de page approprié, mais même pour le même bouton, les styles utilisés dans différents états de page seront différents. La chose la plus importante à propos du style ici est en fait la position. Voyons d'abord comment contrôler le style du bouton, puis comment positionner correctement le bouton dans différents états de page.

@component(...)
export class ContainerWidget {
  public CollpaseExpandState: any = CollapseExpandState;
}

Pour contrôler les styles de boutons, nous devons contrôler trois styles : "bouton gauche", "bouton droit" et "boutons". Trois solutions peuvent être envisagées :

I. Utiliser ng-class

L'utilisation générale de ng-class est la suivante :

Il doit donc être contrôlé par un booléen. Chaque style a besoin d'un booléen pour contrôler chacun deux styles, donc 5 booléens. nécessaire à contrôler, légèrement gênant.

<some-element [ngClass]="{&#39;first&#39;: true, &#39;second&#39;: true, &#39;third&#39;: false}">...</some-element>

II. Utilisez ElementRef.nativeElement.className

pour utiliser des variables de modèle sur les boutons, respectivement à gauche et à droite, puis définissez-les en classe :

Dans la fonction de traitement, attribuez une valeur à la classe pour changer le style :

@ViewChild("buttons") buttons: ElementRef;
@ViewChild("left") left: ElementRef;
@ViewChild("right") right: ElementRef;

Dans ce cas, vous devez commencer du point de vue de l'élément et n'avoir besoin que de 3 variables d'élément pour modifier le nom de classe sur l'élément. Mais il y a un danger caché à faire cela. Notez que nous utilisons ngIf pour contrôler si gauche et droite existent dans des états différents, car chaque traitement d'événement nécessite d'attribuer des valeurs aux styles des trois éléments, mais si ngIf est dans une certaine page. state S'il est faux et que l'élément n'existe pas, alors une erreur "Null Pointer" sera signalée. Par conséquent, si l'élément référencé est contrôlé par ngIf et que vous n'êtes pas sûr qu'il doit exister, vous devez utiliser cette méthode pour attribuer. styles à l’élément avec prudence.

this.left.nativeElement.className = "XXXXX";

III. Utilisez class="{{}}"

为了II中的尴尬，我们采用在HTML元素上对class进行直接赋值的方式，但是需要借用插值表达式{{}}。我们在css中用class的形式定义好样式，并且在compoennt class中定义三个字符串变量记录className，然后在事件处理函数中把相应的className赋予变量即可。这样我们就不用担心元素是否存在而导致的空指针了。

考虑完如何控制样式，下面我们进入CSS样式的讨论，这里其实主要考虑的就是位置。

我们采用flex布局，从左到右依次排列Summary Panel, buttons和Detail Panel。我们希望Buttons向左移，但是空出的位置被Detail Panel来填充。首先来看一下不设样式的效果图：

显然buttons是占据了文档流的位置的，如果这时候我们用relative定位buttpms，并且设置left的值为-74px（注意到left为负数就会把元素往左推）：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  left: -74px;
}

效果图为：

发现如果用left的话，buttons原来的文档流位置依然存在，只是buttons相对于原来的位置移动了一定的位移。

如果我们用margin-left来设置呢：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  margin-left: -74px;
}

效果图为：

它和left不同之处在于，left会留住原来的文档流位置，但是用margin-left原来的文档流位置会消失，而由后面的元素补充过来，而我们想要的效果，正好是用margin-left来实现的。

所以用CSS定位的时候，要明白left和margin-left的区别，从而选择正确的方式来定位。

总结一下，从这个案例中我们学习到了：

1. 双向折叠可以用“3种页面状态去控制2个按钮”来实现

2. enum在Angular Component的template中用到时，需要在compnent class中添加它的引用

3. 控制元素样式有很多方法，要选择合适的方法

4. CSS定位中left和margin-left虽然都能把元素推向左边，但是left保留原来文档流位置，margin-left不保留原来文档流位置。

相关推荐：

简单实现Angular文字折叠展开效果

有关折叠式的文章推荐

使用纯CSS打造可折叠树状菜单方法介绍

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!