angular 组件调用（angular的splitter组件）

这次这个组件来自angular-split。

首先新建一个angular的项目。

等初始化项目完成，就可以启动Angular CLI Server

浏览器里面打开http://localhost:4200/

删除默认的页面内容。增加两个div，一个left一个right，用于接下来应用splitter组件。

添加angular-split组件依赖。

重新运行npm install自动安装组件。

修改app.module.ts，引入AngularSplitModule

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularSplitModule } from 'angular-split'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularSplitModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

修改app.component.html

<div style="width: 500px; height: 600px; background: blue;"> <as-split direction="horizontal"> <as-split-area> <div> LEFT </div> </as-split-area> <as-split-area> <div> RIGHT </div> </as-split-area> </as-split> </div>

重新看页面，splitter组件已经可以使用了。使用鼠标拖动，可以更改左右大小了。