钟爱Angular
WeUI在微信上的表现真的很惊艳，极大简化微信UI的纠结。如果你和我一样一时找不到合适的UI，WeUI未尝不是一种选择。
一直以来大厂对React比较钟爱，官网也提供 React-Weui 版本；而对于像我这类钟爱Angular的人而言，或者说团队里面对Angular比较熟悉的情况下，如果能有一套比较标准的UI，在微信端开发应用也会极爽。
当然啦，Angular版本的WeUI在Github上也有好几套，但要么是还处于2.x时代、要么就是缺少维护。因此，不得以重复造了一套轮子，其名：ngx-weui。
如何使用
下面会有点啰嗦，在这之前可以看一眼。
样式
ngx-weui 除了官网不提供的UI组件样式外，但有些组件又很常用撸了点非官网的样式外，不带任何样式。因此，在使用前务必先引用weui.css，或者直接在 index.html 中引用官网CDN版本。
安装与注册
npm install ngx-weui --save
ngx-weui 默认情况下可以直接使用：
import { WeUiModule } from 'ngx-weui';@NgModule({ imports: [ WeUiModule.forRoot() ]})export class AppModule { } 注册所有的模块。
当然，如果你明确知道只使用其中几个模块的话，可以针对模块进行导入，这样也可以简化包大小，比如导入一个弹出式菜单模块：
import { ActionSheetModule } from 'ngx-weui/actionsheet';@NgModule({ imports: [ ActionSheetModule.forRoot() ]})export class AppModule { } 使用
ngx-weui 本身并没有像 react-weui 版本那样，对样式也进行组件化。关于这一点好坏，和语言环境有很大关系。
用一句比较简单的话来讲，react在运行时决定组件，而angular在编译时决定组件。
正因此如此，所以我决定不对样式也组件化，因为这样完全没有意义。所以 ngx-weui 只对功能性进行组件化。
怎么区分这一点呢？比如说 weui-cell 表示一个单元格，这样样式本身只是为组织我们DOM结构，并不附加任何功能性质，因此并不会像react一样有一个相对应的 Cell 组件。
当然，像Toast本身是需要触发产生的，则 ngx-weui 会有一个对应的组件叫 weui-toast。
Toast From Component
@ViewChild('success') successToast: ToastComponent; 默认Toast组件创建后是被隐藏的，所以这里需要定义一模板变量用于存储这个组件实例，才能调用该组件的 onShow() 方法。
恩，上面的写有点奇怪，因为不是很优雅，我的意思是说需要先在HTML模板中放置一个 weui-toast 组件，然后再定义一个模板变量，最后需要的时候调用显示方法。
所以，提供另一种 Service 形式写法，为什么呢？很简单，很多时候我们希望在 Class 里直接一个 Toast 显示告知用户你有问题，这个时候还要去HTML模板创建再显示，显得编码太过于笨拙。
constructor(public srv: ToastService) { // success srv.success(); // loading srv.loading();} 怎样，注入 Service 类，一行代码简洁、优雅！
全局默认配置项说明
有一些模块（比如：actionsheet、button等），虽然已经有一些默认的配置，但你可以通过全局注册来改变它。
比如，默认按钮的类型是 primary（成功样式）。
成功样式按钮 警告样式按钮
可以在NgModule改变默认配置项，默认所有按钮为警告样式。
import { NgModule } from '@angular/core';import { WeUiModule, ButtonConfig } from 'ngx-weui';@NgModule({ imports: [ WeUiModule.forRoot() ], providers: [ // 重置默认按钮样式为：warn { provide: ButtonConfig, useFactory: ()=> { return Object.assign(new ButtonConfig(), { type: 'warn' }); } } ]}) 这种方式，可以简化通用操作。
是否允许全局配置的模块，可以在API文档中见【可用于[全局配置]】字样的类，都属性可用于全局配置类。
一些细节但又有用的点
命名说明
HTML模板中组件名、属性名的命名有的是以 weui- 开头，而有的并没有。其实，很容易理解这些区别。
- 所有组件、指令都需要
weui-开头。 - 指令所需要的属性都需要
weui-开头。 - 组件只允许标签（指：
<weui-actionsheet></weui-actionsheet>）写法都不需要weui-开头。
最后
ngx-weui 会保持更新及组件的开发，如果您有兴趣可以至 了解更多。