在 Angular 4 中折叠 - Javascript

在 Angular 4 中，我们可以使用指令来实现折叠效果。以下是实现折叠效果的一种方法：

HTML

我们需要在 HTML 模板中使用一个按钮和一个区域来实现折叠效果。以下是 HTML 代码：

<button type="button" (click)="toggle()">折叠</button>
<div [hidden]="!isCollapsed">
  <p>这是要被折叠的区域</p>
</div>

组件

我们需要在组件中定义 toggle 方法，并在组件中定义 isCollapsed 变量来记录目前是展开还是折叠状态。以下是组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-collapse',
  templateUrl: './collapse.component.html',
  styleUrls: ['./collapse.component.css']
})
export class CollapseComponent {
  isCollapsed = true; // 初始状态为折叠

  toggle() {
    this.isCollapsed = !this.isCollapsed;
  }
}

CSS

我们可以使用 CSS 来对折叠的区域进行样式设置，以下是示例 CSS 代码：

div {
  border: 1px solid black;
  padding: 10px;
}

完整代码

以下是实现折叠效果的完整代码：

<!-- collapse.component.html -->
<button type="button" (click)="toggle()">折叠</button>
<div [hidden]="!isCollapsed">
  <p>这是要被折叠的区域</p>
</div>

// collapse.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-collapse',
  templateUrl: './collapse.component.html',
  styleUrls: ['./collapse.component.css']
})
export class CollapseComponent {
  isCollapsed = true; // 初始状态为折叠

  toggle() {
    this.isCollapsed = !this.isCollapsed;
  }
}

/* collapse.component.css */
div {
  border: 1px solid black;
  padding: 10px;
}

该折叠效果的完整代码已经可以使用了。