Angular 17集成PrimeNG Editor时ngModel值无法渲染求助

问题分析 #

从你的代码来看，问题主要集中在Quill版本兼容性、缺失必要样式文件以及组件初始化时机这几个核心点上。

解决方案步骤 #

1. 替换Quill为稳定版 #

你当前使用的Quill 2.0.0-rc.2是候选发布版，存在不稳定因素，PrimeNG 17.2.0适配Quill 2.x稳定版本。执行以下命令更新依赖：

npm uninstall quill
npm install quill@^2.0.2

2. 补充必要样式文件 #

PrimeNG Editor依赖Quill的基础样式，同时需要确保PrimeNG核心样式加载。修改angular.json的styles数组：

"styles": [
  "src/styles.scss",
  "node_modules/primeng/resources/themes/arya-orange/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/quill/dist/quill.snow.css"
],

3. 调整初始化时机 #

将值的初始化逻辑移至ngAfterViewInit钩子，确保Editor组件完成DOM渲染后再赋值：

import { Component, OnInit, AfterViewInit} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputMaskModule } from 'primeng/inputmask';
import { EditorModule } from 'primeng/editor';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss',
  standalone:true,
  imports:[ EditorModule, InputMaskModule, FormsModule ],
})
export class TestComponent implements OnInit, AfterViewInit {
  gfg: string = 
  `<div>GeeksforGeeks!</div> 
  <div> 
      It is a Computer Science Portal 
  </div> 
  <div><br></div>`; 

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    // 延迟赋值确保Editor DOM已就绪
    setTimeout(() => {
      this.gfg = this.gfg;
    }, 0);
  }
}

4. 修正占位符的错误使用 #

模板中把HTML内容绑定到placeholder会导致显示异常，替换为普通提示文本：

<h3 class="first">Default</h3>
<p-editor [(ngModel)]="gfg" [style]="{'height':'320px'}" [debug]="true" placeholder="请输入内容..."></p-editor>
<p>Value: {{gfg||'empty'}}</p>

<button pButton type="button" label="Clear" icon="fa-close" (click)="gfg=null"></button>

验证操作 #

1. 执行npm install更新依赖
2. 重启开发服务器ng serve
3. 检查Editor是否正常渲染初始值，修改内容后下方的Value文本是否同步更新

内容的提问来源于stack exchange，提问作者Giacomo Franci