Angular implements two-way folding list component

This article mainly introduces the sample code for implementing the bidirectional folding list component in Angular. It is divided into two groups, the left and right groups. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Recently I am making a two-way folding component, as shown in the figure below. The page is divided into two groups. The left page is the Summary Panel, which is mainly a set of lists. The right page is the Detail Panel, which displays a certain item in the left list. The specific information of the item is recorded as "Middle State".

##We also see that there are two sets of buttons "<" and ">". This is the "two-way folding component" we are going to do. Click the "<" on the left, the Summary Panel collapses, and the Detail Panel covers the entire page. We record it as "Left State", as shown below:

In Summary When the Panel is in the collapsed state, click ">" to return to the "Middle State". Click ">", the Detail Panel is folded, and the Summary Panel covers the entire page. We record it as "Right State", as shown below:

We pass the above According to the demand analysis,

1. The overall layout of the page is a p for Summary, two arrow buttons, and a p for Detail.

2. The page has a total of three states: "Middle", "Left", and "Right", and two buttons: "<" and ">", that is, two buttons to go Control three states.

So we need to define an enumeration to record the three states of the page (note that you must use export to define the enumeration, otherwise an error will occur later)

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

The page structure is as follows, and a variable _collapseExpandState is used to control the "left" and "right" buttons. Specifically, "<" will be used when the page status is "Middle" and "Right" Appears, ">" will appear when the page status is "Middle" and "Left", which can be known from the demand diagram:

##

<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>

Here in angular Enumerations are used in the template and we encounter some troubles. If we define the enumeration as above and use the enumeration in the Angular Component template, we will get the following error message:

TypeError: Cannot read property 'Middle' of undefined

That is to say, the defined enumeration type CollapseExpandState cannot be recognized in the Angular2 template. This is because the execution environment of the Angular Component template you wrote is The component class you defined, but there is no reference to the CollapseExpandState enumeration in the class, so Angular thinks that CollapseExpandState is undefined when generating a template for your component. Knowing the reason, the solution is easy. You only need to add a reference to this enumeration in the component class:

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

We control it through the enumeration state Whether two buttons are displayed in the appropriate page state or not, but even for the same button, the styles used in different page states will be different. The most important thing about the style here is actually the position. Let's first consider how to control the button style, and then consider how to correctly position the button in different page states.

For controlling button styles, we need to control three styles: "left button", "right button" and "buttons". There are three options that can be thought of:

I. Use ng-class

The general usage of ng-class is as follows:

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

Therefore, it needs to be controlled by boolean. Each style requires a boolean to control. Left and right each have two styles. Buttons have three styles. In this way, 5 booleans are needed to control, which is omitted. Seems troublesome.

II. Use ElementRef.nativeElement.className

Use template variables on buttons, left and right respectively, and then define them in class:

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

In the processing function, assign a value to the class to change the style:

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

In this case, we need to change the style from the element's From a perspective, only 3 element variables are needed to change the className on the element. But there is a hidden danger in doing this. Notice that we use ngIf to control whether left and right exist in different states, because each event processing requires assigning values ​​to the styles of the three elements, but if ngIf in a certain page state If it is false and the element does not exist, then a "Null Pointer" error will be reported. Therefore, if the referenced element is controlled by ngIf and you are not sure whether it must exist, you should use this method to assign styles to the element with caution.

III. Use 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打造可折叠树状菜单方法介绍

The above is the detailed content of Angular implements two-way folding list component. For more information, please follow other related articles on the PHP Chinese website!