angular-split的日本语文章找不到！

angular-split是一个UI库，可以拆分视图并通过拖拽调整分割区域。（几乎直译自官方文档）

这个库非常方便，但似乎没有用日语解释的文章。没找到在Qiita、个人博客文章中的。既然如此为了增加集体智慧，我想我可以写一篇文章。但是我也刚接触，为了降低他人使用angular-split的难度，我打算写一段使用angular-split的最简单的代码。

首先安装。

创建了一个使用ng new命令的Angular模板。

npm install angular-split

执行。马上完成。

然后添加模块

import { AngularSplitModule } from 'angular-split';

在app.module.ts文件的开头添加↑。

AngularSplitModule.forRoot()

在@NgModule的imports中添加↑。

然后写模板

<div class="split-example">
  <as-split [direction]="direction">
    <as-split-area #area1="asSplitArea">
      <p id="left">左</p>
    </as-split-area>
    <as-split-area #area2="asSplitArea">
      <p id="right">右</p>
    </as-split-area>
  </as-split>
</div>

下一步是编写组件。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  direction: string = 'horizontal';

  constructor() {}
}

最后一个是样式表

.split-example {
    height: 100px;
    width: 200px;
}

#left {
    background-color: #cbffff;
}

#right {
    background-color: #ffffc7;
}

好，让我试着展示一下！

仅提供一种选择来用中文复述以下句子：
如果这样做太简单了怎么办呢？那就把它写在html里。

<br />
<button class="btn btn-warning" (click)="direction = (direction === 'horizontal') ? 'vertical' : 'horizontal'">{{ '現在の分割: ' + direction + '' }}</button>

添加并且

在样式表的.split-example中

outline: 5px dashed red;

让我们尝试添加。

如果你能以这篇超级宽松的文章为起点，用官方示例来学习，我会很高兴的。