Angular记录

路由懒加载

创建一个带路由的特性模块

接下来，你将需要一个包含路由的目标组件的特性模块。 要创建它，在终端中输入如下命令，其中 customers 是特性模块的名称。加载 customers 特性模块的路径也是 customers，因为它是通过 --route 选项指定的：

ng generate module customers --route customers --module app.module

这将创建一个 customers 文件夹，在其 customers.module.ts 文件中定义了新的可惰性加载模块 CustomersModule。该命令会自动在新特性模块中声明 CustomersComponent。

因为这个新模块想要惰性加载，所以该命令不会在应用的根模块 app.module.ts 中添加对新特性模块的引用。 相反，它将声明的路由 customers 添加到以 --module 选项指定的模块中声明的 routes 数组中。

src/app/app-routing.module.ts

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

基于当前路由进行跳转

constructor(private router: Router,
              private route: ActivatedRoute) { }

goImport(): void {
    this.router.navigate(['import'], { relativeTo: this.route.parent});
}

路由参数接收

一、路径

<a routerLink="/home/news/news-detail/1"> 跳转1</a>
<a [routerLink]="['/home/news/news-detail/2']"> 跳转2 </a>
<a [routerLink]="['/home/news/news-detail',3]"> 跳转3 </a>
this.router.navigate(['/home/news/news-detail/1']);
this.router.navigate(['/home/news/news-detail',1]);

import { ActivatedRoute, Params } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
 // 1. 使用 ActivatedRoute 的 snapshot 快照的 paramMap 的 get(key) 方法
 const id = this.route.snapshot.paramMap.get('id');
 // 2. 使用 ActivatedRoute 的 snapshot 快照的 params 对象
 const id = this.route.snapshot.params['id'];
 // 3.使用params的订阅 subscribe(多个参数时使用 paramMap)
 this.route.params.subscribe((params: Params) => {
   const id = params['id'];
   console.log('id==>', id);
 });
 // 4.
 this.route.paramMap
     .pipe(
       filter(params => params.get('bibId') !== '0' && this.store.selectSnapshot(DcBatchHandoverState.empty) === false),
       tap(params => {
         this.bibId = params.get('bibId');
       }),
     ).subscribe();
}
 

二、查询参数

<a [routerLink]="['/home/news/news-detail']" [queryParams]="{id: 4}"> 
    444 
</a>
this.router.navigate(['/home/news/news-detail'], 
    { queryParams: { 'id': '2' ,title:'详情页'} });
this.router.navigateByUrl(['/home/news/news-detail'], 
    { queryParams: { 'id': '2' ,title:'详情页'} });

// 1. 使用 ActivatedRoute 的 snapshot 快照的 queryParams 对象
const id = this.route.snapshot.queryParams['id'];
// 2. queryParams的订阅
this.route.queryParams.subscribe((params: Params) => {
    const id = params['id'];
    console.log('id==>', id);
});

变更检测机制 ChangeDetectorRef 使用方法

<dxi-item
            [editorOptions]="{ dataSource: statusTypeGroup, displayExpr: 'name', valueExpr: 'code',  onValueChanged: itemStatusChanged}"
            dataField="properties.type"
            editorType="dxSelectBox">
            <dxo-label text="{{ 'properties.statusType' | translate }}"></dxo-label>
            <dxi-validation-rule type="required" message="{{ 'validation.required' | translate:{ 'field': 'properties.statusType'} }}"></dxi-validation-rule>
          </dxi-item>
          <dxi-item
            [editorOptions]="{ dataSource: locationGroup, displayExpr: 'name', valueExpr: 'code'}"
            dataField="properties.locaCode"
            editorType="dxSelectBox">
            <dxo-label text="{{ 'properties.locaCode' | translate }}"></dxo-label>
            <dxi-validation-rule type="required"  message="{{ 'validation.required' | translate:{ 'field': 'properties.locaCode'} }}"></dxi-validation-rule>
          </dxi-item>

上述代码，第二个下拉框随着第一个的值改变而改变其dataSource,起始locationGroup为空数组，因此在页面上改变第一个下拉框值时，即使后台locationGroup值改变，但不会自动更新视图层的显示，页面的第二个下拉框仍然取的初始值，即空数组。
可以用 ChangeDetectorRef 来驱动angular更新视图。

private readonly cdRef: ChangeDetectorRef
this.cdRef.detectChanges();