ng-alain 创建页面

​​ng-alain 创建页面​​

​​https://ng-alain.com/cli/generate/zh​​

​​https://ng-alain.com/docs/new-page/zh​​

默认情况下，创建模块 trade，创建在目录 src/app/routes 下面。

% ng g ng-alain:module trade
? Which service injectors would you like to use? Ignore generation of Service 
files
CREATE src/app/routes/trade/trade-routing.module.ts (249 bytes)
CREATE src/app/routes/trade/trade.module.ts (319 bytes)
UPDATE src/app/routes/routes-routing.module.ts (2837 bytes)
%

可以通过配置改变

默认情况下所有的代码统一存放于 app/routes 下面，可通过添加 ng-alain.json 配置文件来指向其他目录，例如：

{
  "$schema": "./node_modules/ng-alain/schema.json",
  "projects": {
    // 表示 ng-alain 项目都存放于 `app/pages` 下
    "my-project": {
      "routesRoot": "app/pages"
    }
  }
}

注意，这里的 my-project 是项目名称，表示针对该项目使用此配置。执行效果如下：

my-project % ng g ng-alain:module trade
? Which service injectors would you like to use? Ignore generation of Service 
files
CREATE src/app/pages/trade/trade-routing.module.ts (249 bytes)
CREATE src/app/pages/trade/trade.module.ts (319 bytes)
my-project %

可以看到新创建的模块保存到 src/app/pages 目录下。

创建列表页面

-m 表示创建在指定的模块中。

my-project % ng g ng-alain:list list -m=trade
? Which service injectors would you like to use? Ignore generation of Service 
files
CREATE src/app/pages/trade/list/list.component.html (352 bytes)
CREATE src/app/pages/trade/list/list.component.spec.ts (657 bytes)
CREATE src/app/pages/trade/list/list.component.ts (1278 bytes)
UPDATE src/app/pages/trade/trade.module.ts (400 bytes)
UPDATE src/app/pages/trade/trade-routing.module.ts (359 bytes)
(base) whao@bjmacbook11 my-project %

新建列表页的模版，路径为：src/app/pages/trade/list/list.component.html

<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <button (click)="add()" nz-button nzType="primary">新建</button>
  </ng-template>
</page-header>
<nz-card>
  <sf mode="search" [schema]="searchSchema" (formSubmit)="st.reset($event)" (formReset)="st.reset($event)"></sf>
  <st #st [data]="url" [columns]="columns"></st>
</nz-card>

代码内容路径为：src/app/pages/trade/list/list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';

@Component({
  selector: 'app-trade-list',
  templateUrl: './list.component.html',
})
export class TradeListComponent implements OnInit {
  url = `/user`;
  searchSchema: SFSchema = {
    properties: {
      no: {
        type: 'string',
        title: '编号'
      }
    }
  };
  @ViewChild('st') private readonly st!: STComponent;
  columns: STColumn[] = [
    { title: '编号', index: 'no' },
    { title: '调用次数', type: 'number', index: 'callNo' },
    { title: '头像', type: 'img', width: '50px', index: 'avatar' },
    { title: '时间', type: 'date', index: 'updatedAt' },
    {
      title: '',
      buttons: [
        // { text: '查看', click: (item: any) => `/form/${item.id}` },
        // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' },
      ]
    }
  ];

  constructor(private http: _HttpClient, private modal: ModalHelper) { }

  ngOnInit(): void { }

  add(): void {
    // this.modal
    //   .createStatic(FormEditComponent, { i: { id: 0 } })
    //   .subscribe(() => this.st.reload());
  }

}

创建增、删、改、查页面

my-project % ng g ng-alain:curd curd -m=trade
? Which service injectors would you like to use? Ignore generation of Service 
files
CREATE src/app/pages/trade/curd/curd.component.html (352 bytes)
CREATE src/app/pages/trade/curd/curd.component.spec.ts (657 bytes)
CREATE src/app/pages/trade/curd/curd.component.ts (1278 bytes)
CREATE src/app/pages/trade/curd/edit/edit.component.html (493 bytes)
CREATE src/app/pages/trade/curd/edit/edit.component.spec.ts (681 bytes)
CREATE src/app/pages/trade/curd/edit/edit.component.ts (1599 bytes)
CREATE src/app/pages/trade/curd/view/view.component.html (586 bytes)
CREATE src/app/pages/trade/curd/view/view.component.spec.ts (681 bytes)
CREATE src/app/pages/trade/curd/view/view.component.ts (658 bytes)
UPDATE src/app/pages/trade/trade.module.ts (672 bytes)
UPDATE src/app/pages/trade/trade-routing.module.ts (470 bytes)
(base) whao@bjmacbook11 my-project %