NG-YUNZAI- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
Willberemovedinv19,Pleaseuse@letinstead.
允许在模板内复用计算值（包含异步），避免重复重新计算。
<div *let="value1 as v">
<p>{{ v }}</p>
</div>
<div *let="time$ | async as time">
<p>{{ time }}</p>
</div>代码演示
v1 (use *let directive) called count: 0; v2 called count: 0;
v1
v1
v2
v2
最简单的用法。
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { LetDirective } from '@yelon/abc/let';
import { NzButtonModule } from 'ng-zorro-antd/button';
@Component({
selector: 'components-let-simple',
template: `
<p>v1 (use *let directive) called count: {{ v1Count }}; v2 called count: {{ v2Count }};</p>
<div *let="value1 as v">
<p>{{ v }}</p>
<p>{{ v }}</p>
</div>
<p>{{ value2 }}</p>
<p>{{ value2 }}</p>
<button nz-button (click)="update()">Random Value</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [LetDirective, NzButtonModule]
})
export class ComponentsLetSimpleComponent {
v1Count = 0;
v2Count = 0;
v1 = 'v1';
v2 = 'v2';
get value1(): string {
++this.v1Count;
return this.v1;
}
get value2(): string {
++this.v2Count;
return this.v2;
}
update(): void {
this.v1 = `v1-${Math.random()}`;
this.v2 = `v2-${Math.random()}`;
}
}一次订阅多次使用。
import { Platform } from '@angular/cdk/platform';
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { interval, startWith } from 'rxjs';
import { LetDirective } from '@yelon/abc/let';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
@Component({
selector: 'components-let-async',
template: `
@if (timer$ !== null) {
<ng-container *let="timer$ | async as time">
<p>Timer value: {{ time }}</p>
<p>Timer value: {{ time }}</p>
<p>Timer value: {{ time }}</p>
</ng-container>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [LetDirective, AsyncPipe]
})
export class ComponentsLetAsyncComponent {
timer$: NzSafeAny | null = null;
constructor(platform: Platform) {
if (!platform.isBrowser) return;
this.timer$ = interval(1000).pipe(startWith(0));
}
}