Ng-alain

来自ling
跳转至: 导航搜索

常用

https://ng-alain.com/docs/getting-started/zh

命令

npm install -g @angular/cli
ng add ng-alain@next
ng g ng-alain:plugin hmr

ng-alain 有自己的一套文件组织结构,当你破坏这些结构时,可能会导致下列指令产生异常。

ng g ng-alain:<command name>  [options]
  • empty 空白页
  • list 列表页
  • edit 编辑页
  • view 查看页
  • curd 列表、编辑、查看

因此,当你希望生成的查看应该是在 log 组件下面时 -t=log 表示希望把创建的文件放进至 sys/log/view 下面。

ng g ng-alain:view view -m=sys -t=log

edit & view 页 对于 edit、view 默认是以模态框展示来生成,你可以改用页面展示则:

ng ng-alain:edit <page name> --modal=false

添加模块和页面示例

ng g ng-alain:module portal
ng g ng-alain:list index -m=portal
ng g ng-alain:view portalView -m=portal --modal=false
ng g ng-alain:edit portalEdit -m=portal --modal=false
ng g ng-alain:curd portalCurd -m=portal --modal=false
  • src\app\routes\routes-routing.module.ts
{ path: 'portal', loadChildren: './portal/portal.module#PortalModule', data: { title: 'portal', titleI18n: 'portal' } },
  • src\app\core\startup\startup.service.ts
, {
            text: 'portal',
            link: '/portal/index',
            icon: 'anticon anticon-appstore-o'
          }

自定义页

除上述默认业务页以外,也可以自定义属于项目级别业务页,例如我们创建一个自己的编辑页模板,则只需要在项目的根目录创建以下目录结构:

└── _cli-tpl
│   └── edit                                              // 模板名称
│       └── __path__                                      // (名称固定值)
│           └── __name@dasherize@if-flat__                // (名称固定值)
│               ├── __name@dasherize__.component.ts       // 组件类文件(名称固定值)
│               ├── __name@dasherize__.component.html     // 组件模板文件(名称固定值)
│               └── __name@dasherize__.component.spec.ts  // 组件测试文件(名称固定值)
└── src

之后,只需要运行:

ng g ng-alain:tpl <your template name>  -m=trade

自定义页参数同业务页一致。

如何编写模板文件

在自定义页的目录结构里我们看到文件名以 __ 前缀开头,事实上他们是一些变量�占位符,Cli 默认传递一些参数及方法:

类型	参数名	默认	描述
变量	project	-	项目名
变量	name	-	名称,相当于命令行的 <name>
变量	path	-	目标路径
变量	flat	false	文件是否扁平结构
变量	inlineTemplate	false	是否内联模板(固定值:false)
变量	selector	-	组件 selector
变量	componentName	-	组件名称
变量	changeDetection	Default	组件 changeDetection 值
变量	modal	-	是否使用 Modal 展示
方法	decamelize	-	将字母串转换为由下划线分隔的所有小写字母
方法	dasherize	-	将空格或下划线用破折号替换
方法	camelize	-	返回字符串的小骆驼拼写法形式
方法	classify	-	返回字符串的大骆驼拼写法形式
方法	underscore	-	将字母串转换为由下划线分隔的所有小写字母
方法	capitalize	-	返回字符串首字母大写

这些变量或方法可以在模板中使用,例如:<%=componentName%> 表示组件名,任何使用 <% %> 内可以使用 JavaScript 代码。有关模板编写可以参考:

delon

<% if(modal) { %><div class="modal-header">
  <div class="modal-title">编辑 {{ record.id }} 信息</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<sf *ngIf="i" #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
  </div>
</sf><% } else { %><page-header [title]="'编辑 ' + id + ' 信息'"></page-header>
<nz-card>
  <nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
  <sf *ngIf="i" #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
    <footer-toolbar errorCollect>
      <button nz-button type="button" (click)="_location.back()" [nzLoading]="http.loading">返回</button>
      <button nz-button type="submit" [nzType]="'primary'" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
    </footer-toolbar>
  </sf>
</nz-card><% } %>

material2

<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>
  <mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div>Card Content Here</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

错误

operation not permitted, unlink 'D:\workspace\source\dttcloud\tmsdev\tms-portal\node_modules\.staging\ng-zorro-antd-7087cd3b\bundles\ng-zorro-antd.umd.min.js'

npm install -g yarn 
yarn install