UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读本文围绕 ng-zorro-antd 中基于 monaco-editor 的nz-code-editor组件components/code-editor讲解如何在应用运行时动态修改代码编辑器的默认配置与页面内单个编辑器实例的配置。你将掌握NzConfigService.set与getConfigForComponent的使用方式、全局CodeEditorConfig与组件级[nzEditorOption]的合并机制以及用开关控件在明暗主题间热切换的完整实战写法——这部分内容正是官方示例 config.ts 所演示的能力。一、需求背景为什么需要运行时改配置monaco-editor 的诸多能力主题、语言、自动完成、缩进、折叠等在初始化时确定但实际业务中常常需要在不刷新页面的情况下改变这些设置。官方示例 config.md 将其归纳为两类需求修改默认配置即全局默认项defaultEditorOption会影响此后初始化的一切编辑器实例修改页面上编辑器的配置即某个已存在实例自身的[nzEditorOption]。ng-zorro-antd 为此提供了两套机制一套是组件输入[nzEditorOption]作用于单个实例另一套是NzConfigService的全局配置作用于默认项与资源加载。两者最终会在组件内部被合并后统一推送给 monaco。二、先掌握基础两种配置入口1. 组件级配置[nzEditorOption]每个nz-code-editor实例都可以直接传入 monaco 的IEditorConstructionOptionsnormal 模式或IDiffEditorConstructionOptionsdiff 模式相关类型定义见 typings.tstype EditorOptions editor.IStandaloneEditorConstructionOptions; type DiffEditorOptions editor.IDiffEditorConstructionOptions; type JoinedEditorOptions EditorOptions | DiffEditorOptions;典型用法见 basic.tsnz-code-editor classeditor [ngModel]code [nzEditorOption]{ language: typescript } /nzEditorOption以 setter 形式接收新值并写入内部的editorOption$流也就是说运行时替换该输入值即可触发更新code-editor.component.ts。2. 全局配置NzConfigServicecodeEditor命名空间ng-zorro-antd 所有组件共用一个NzConfigServicecomponents/core/configcode-editor 的全局配置类型定义在 config.tsexport interface CodeEditorConfig { assetsRoot?: string | SafeUrl; // monaco 资源根路径默认 assets extraConfig?: NzSafeAny; // 额外传给 window.require.config 的配置 defaultEditorOption?: NzSafeAny; // 全局默认编辑器选项 useStaticLoading?: boolean; // 是否启用静态加载 monacoEnvironment?: MonacoEnvironment;// 全局 MonacoEnvironment 配置 onLoad?(): void; // monaco 资源加载完毕钩子 onFirstEditorInit?(): void; // 第一个编辑器初始化钩子 onInit?(): void; // 每个编辑器初始化钩子 }读取与写入的 APIconst nzConfigService inject(NzConfigService); // 读取某个命名空间下的配置 const cfg nzConfigService.getConfigForComponent(codeEditor); // 写整体替换该命名空间配置推荐先读后合并再写 nzConfigService.set(codeEditor, { ... });三、核心实战运行时切换明暗主题官方示例 config.ts 展示了完整的运行时改配置流程——用nz-switch开关在vs亮色与vs-dark暗色主题之间切换页面上已经渲染好的 markdown 编辑器会立即跟随变化import { Component, inject, signal } from angular/core; import { FormsModule } from angular/forms; import { NzCodeEditorModule } from ng-zorro-antd/code-editor; import { NzConfigService } from ng-zorro-antd/core/config; import { NzIconModule } from ng-zorro-antd/icon; import { NzSwitchModule } from ng-zorro-antd/switch; Component({ selector: nz-demo-code-editor-config, imports: [FormsModule, NzCodeEditorModule, NzIconModule, NzSwitchModule], template: p nz-paragraph stylemargin-bottom: 8px; Change Theme nz-switch [ngModel]dark() (ngModelChange)onDarkModeChange($event) [nzUnCheckedChildren]unchecked [nzCheckedChildren]checked / /p ng-template #unchecked nz-icon nzTypebulb / /ng-template ng-template #checked nz-icon nzTypepoweroff / /ng-template nz-code-editor styleheight: 200px [ngModel]code [nzEditorOption]{ language: markdown } / }) export class NzDemoCodeEditorConfigComponent { private readonly nzConfigService inject(NzConfigService); readonly dark signal(false); readonly code ...你的 markdown 内容...; onDarkModeChange(dark: boolean): void { this.dark.set(dark); const defaultEditorOption this.nzConfigService.getConfigForComponent(codeEditor)?.defaultEditorOption || {}; this.nzConfigService.set(codeEditor, { defaultEditorOption: { ...defaultEditorOption, theme: dark ? vs-dark : vs } }); } }这个写法的关键点先读后写getConfigForComponent(codeEditor)?.defaultEditorOption || {}取出已有默认项避免覆盖此前设置的其他选项浅合并再整体 setset(codeEditor, ...)是整体替换命名空间配置所以必须用展开运算符保留已有字段只需改thememonaco 支持monaco.editor.setTheme()全局换肤暗色/亮色主题的切换成本极低。底层原理配置如何流到 monaco从源码可以看清这条链路code-editor.service.ts服务构造函数读取全局配置并保存为this.config同时用defaultEditorOption初始化内部option$流并注册onConfigChangeEventForComponent(codeEditor, ...)监听配置变更L50-L65一旦配置变化_updateDefaultOption会做两件事把新默认项浅合并进this.option并推入option$如果新配置里带theme还会直接调用monaco.editor.setTheme(option.theme)完成全局换肤L67-L74组件端在registerOptionChanges中combineLatest([editorOption$, option$])把自身选项 全局默认选项按{ ...默认, ...自身 }的顺序合并再通过updateOptions推送给 monaco 实例code-editor.component.ts 与 L314-L318。也就是说NzConfigService.set修改的是默认层[nzEditorOption]修改的是实例层实例层优先级更高最终两者合流后统一生效。示例中页面只放了一个编辑器且没有覆盖 theme因此开关切换主题时所有实例包括未来的新实例都会跟随。四、全局配置的各项能力详解除defaultEditorOption外CodeEditorConfig的其他字段同样可通过NzConfigService在运行时维护官方文档说明index.zh-CN.md与源码实现相互印证配置项作用默认值源码依据assetsRootmonaco 静态资源根路径组件会自动拼接${assetsRoot}/vs/loader.js并注册 AMD 路径assets即assets/vscode-editor.service.tsdefaultEditorOption全局默认编辑器选项会与实例级nzEditorOption合并{}code-editor.service.tsonLoadmonaco 资源加载完成回调此时全局monaco可用-L154-L160onFirstEditorInit第一个编辑器请求初始化时触发只触发一次-L162-L169onInit每个编辑器请求初始化时都触发-L162-L169useStaticLoading使用 webpack 静态打包 monaco不再动态注入脚本falseL83-L91extraConfig透传给window.require.config的扩展配置-L122-L125monacoEnvironment配置window.MonacoEnvironment如 worker 路径-L54-L56关于monacoEnvironment的说明新版 monaco-editor 0.22.0要求使用全局 API 时需要自行声明window.MonacoEnvironment { globalAPI: true }这通常与onLoad钩子配合使用。服务端在构造函数中会把配置里的monacoEnvironment直接挂到window上L54-L56。五、运行时修改单个实例配置[nzEditorOption]的动态更新除了全局默认项你也可以只针对页面上的某一个编辑器实例改配置。由于nzEditorOption是 setter 输入L82-L84运行时替换输入值即可Component({ ... }) export class SomeEditorComponent { editorOption { language: typescript, theme: vs }; switchToDark(): void { this.editorOption { ...this.editorOption, theme: vs-dark }; } }nz-code-editor [ngModel]code [nzEditorOption]editorOption /组件内部会通过combineLatest感知新选项并调用editorInstance.updateOptions(...)增量更新不会重建编辑器实例也不会丢失当前光标与内容。这是实例级热更新与全局默认更新的本质区别——前者只影响这一个实例。六、别忘了资源加载动态加载与静态加载运行时改配置的前提是 monaco 已正确加载官方文档index.zh-CN.md给出的两种方案如下。动态加载默认在angular.json中把 monaco 的vs目录注册为静态资源assets: [ { glob: **/*, input: ./node_modules/monaco-editor/min/vs, output: /assets/vs/ } ]组件会在需要时自动向assets/vs/loader.js发起请求见 loadMonacoScript。若资源放在 CDN则无需改angular.json改为通过NzConfigService设置assetsRoot例如资源位于https://mycdn.com/assets/vs时传入{ assetsRoot: https://mycdn.com/assets }。静态加载当你的应用同时使用 requireJS 等 AMD 加载库时monaco 的 loader.js 会 patch 全局window.require可能产生冲突此时应启用静态加载在app.config.ts中提供NZ_CONFIG并设置codeEditor.useStaticLoading true创建webpack.partial.js按 monaco-editor-webpack-plugin 文档配置打包使用ngx-build-plus等自定义脚本加载器在构建时引入该 webpack 配置。静态加载下无需在angular.json注册资源。源码侧对此有防御当useStaticLoading为真但全局monaco未定义时会输出警告提示 webpack 插件配置可能遗漏L83-L91。七、与运行时配置配套的组件 API在动态配置时你可能还需要操作实例本身nz-code-editor的公开 API 如下详见 index.zh-CN.md输入/输出类型说明[nzEditorMode]normal \| diff编辑器模式默认normal[nzLoading]boolean加载中状态显示内置 loading默认false[nzOriginalText]stringdiff 模式左侧文本[nzFullControl]boolean完全控制模式组件不再管理TextModel默认false[nzEditorOption]IEditorConstructionOptions编辑器选项默认{}[nzToolkit]TemplateRefvoid自定义快捷操作区(nzEditorInitialized)IStandaloneCodeEditor \| IStandaloneDiffEditor初始化完成事件layout()方法强制组件重新渲染如全屏切换后调用其中layout()与运行时配置关系密切窗口resize或容器尺寸变化如 complex.ts 的全屏切换后应手动调用它以触发 monaco 的editor.layout()code-editor.component.ts 与 L199-L220。八、最佳实践小结全局默认项用NzConfigService.set(codeEditor, ...)且务必先getConfigForComponent再展开合并避免误删其他配置单个实例用[nzEditorOption]动态替换优先级高于全局默认项主题切换优先改全局defaultEditorOption.theme底层会走monaco.editor.setTheme对页面上所有实例即时生效diff 模式同理nzEditorModediff时选项类型为IDiffEditorConstructionOptions可参考 diff.ts 的用法全屏、弹窗等尺寸变化场景记得调用layout()否则编辑区可能出现空白或错位若使用完全控制模式[nzFullControl]true组件不再替你管理TextModel需要像 full-control.ts 那样在nzEditorInitialized中自行setModel此时也不要再依赖ngModel双向同步。通过全局默认 实例覆盖双层配置模型你可以在运行时自由调整 ng-zorro-antd 代码编辑器的外观与行为而无需重建页面或重新加载 monaco 资源。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd主题变量动态修改终极指南如何在运行时定制UI界面ng zorro antd主题变量动态修改终极指南如何在运行时定制UI界面 ng zorro antd作为基于Ant Design的Angular UI组件库UI组件前端NG-ZORRO/ng-zorro-antd 主题定制完全指南NG ZORRO/ng zorro antd 主题定制完全指南 前言 NG ZORROAnt Design of Angular作为企业级UI组件库提供了UI组件前端ng-zorro-antd Code Editor 组件完全指南在 Angular 中集成 Monaco Editorng zorro antd Code Editor 组件完全指南在 Angular 中集成 Monaco Editor 导读 本文围绕 ng zorro anUI组件前端上一篇React Native Keyboard Spacer 项目推荐下一篇Egg.js 项目推荐创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考