官网示例

添加新页面

1). 生成 module 以及(子)路由

  ng-alain-demo git:(master)  ng g ng-alain:module user
CREATE src/app/routes/user/user-routing.module.ts (248 bytes)
CREATE src/app/routes/user/user.module.ts (404 bytes)

效果生成了 user 目录以及两个文件:

  • user-routing.module.ts 路由文件
  • user.module.ts 模块文件,其中引入了该模块的路由以及基础依赖SharedModule

2). 生成新组件,并添加到某个模块

  ng-alain-demo git:(master)  ng g ng-alain:list user-list -m=user
CREATE src/app/routes/user/user-list/user-list.component.html (352 bytes)
CREATE src/app/routes/user/user-list/user-list.component.spec.ts (666 bytes)
CREATE src/app/routes/user/user-list/user-list.component.ts (1276 bytes)
UPDATE src/app/routes/user/user.module.ts (501 bytes)
UPDATE src/app/routes/user/user-routing.module.ts (379 bytes)

效果是生成了组件,并修改了路由和模块:

//user.module.ts
const COMPONENTS = [
  //新增
  UserUserListComponent
];
const COMPONENTS_NOROUNT = [];

@NgModule({
  imports: [SharedModule, UserRoutingModule],
  declarations: [...COMPONENTS, ...COMPONENTS_NOROUNT],
  entryComponents: COMPONENTS_NOROUNT
})
export class UserModule {}

//user-routing.module.ts
const routes: Routes = [
  //新增
  { path: "user-list", component: UserUserListComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule {}

3). 将生成的路由添加到主路由中

const routes: Routes = [
  {
    path: '',
    component: LayoutDefaultComponent,
    canActivate: [SimpleGuard],
    canActivateChild: [SimpleGuard],
    children: [
      //两种写法都可以
      //{ path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
...

疑问 declarations 和 import 的区别

添加新组件

以添加一个使用频繁的组件为例 ,将其一如到 sharedModule 中,方便全局调用 。

1). 使用命令创建组件,并将其移动到 shared 目录中

ng g component image-preview  --skipImport=true

2). 在 shared.module.ts 中引入

const COMPONENTS = [ImagePreviewComponent];

3). 使用组件

网络请求

文档见: https://ng-alain.com/theme/http/zh

提供了_HttpClient,它是HttpClient的封装。 此外,还提供了一种基于修饰器的封装,示例代码如下:

import { Observable } from 'rxjs/internal/Observable';
import { BaseApi, BaseUrl, BaseHeaders, GET, POST, Query, Path, Body  } from '@delon/theme';
import { Injectable } from '@angular/core';

@BaseUrl('/user1')
@BaseHeaders({ bh: 'a' })
@Injectable({
  providedIn: 'root'
})
export class UserApi extends BaseApi {

  @GET()
  query(@Query('pi') pi: number, @Query('ps') ps: number): Observable<any> {
    return Observable.create();
  }

  @GET(':id')
  GET(@Path('id') id: number): Observable<any> {
    return;
  }

  @POST(':id')
  save(@Path('id') id: number, @Body data: {}): Observable<any> {
    return;
  }

  // 若请求的URL不符合授权要求,会直接抛出 `401` 错误,且不发送请求
  @GET('', { acl: 'admin' })
  ACL(): Observable<any> {
    return;
  }
}

下面是修改token和设置baseUrl:

修改baseUrl:

发现拦截器中使用的environment.SERVER_URL,因此直接修改environment文件即可。

...
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 统一加上服务端前缀
    let url = req.url;
    if (!url.startsWith('https://') && !url.startsWith('http://')) {
      url = environment.SERVER_URL + url;
    }
...    

添加token:

http返回值的统一梳理:

待续