Angular中如何将字符串占位符转为输入框并回填值为字符串？

问题分析 #

你当前的代码把HTML标签转义后赋值给字符串，Angular默认会对插值{{message}}的内容做HTML转义，所以<input>会被当成纯文本显示。另外直接拼接HTML字符串的方式也很难实现输入值的双向绑定和后续的字符串还原，推荐用更符合Angular生态的方案处理。

方案一：拆分字符串片段（推荐） #

这种方式将原字符串拆分为静态文本和占位符对象，动态渲染输入框，同时方便绑定输入值。

1. Component.ts 代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-message-editor',
  templateUrl: './message-editor.component.html',
  styleUrls: ['./message-editor.component.css']
})
export class MessageEditorComponent {
  // 原始模板字符串
  originalMessage = 'Dear Mr. [Father_name], your son/daughter [name] not attend class today.';
  // 存储拆分后的文本片段和占位符
  messageSegments: (string | { placeholder: string })[] = [];
  // 存储每个占位符的输入值
  placeholderValues: { [key: string]: string } = {};
  // 最终生成的字符串
  finalMessage = '';

  ngOnInit() {
    this.splitMessageIntoSegments();
  }

  // 拆分原始字符串为静态文本和占位符片段
  splitMessageIntoSegments() {
    const regex = /\[(.*?)\]/g;
    let lastIndex = 0;
    let match: RegExpExecArray | null;

    while ((match = regex.exec(this.originalMessage)) !== null) {
      // 添加静态文本部分
      if (match.index > lastIndex) {
        this.messageSegments.push(this.originalMessage.slice(lastIndex, match.index));
      }
      // 添加占位符对象，并初始化值为空字符串
      const placeholderName = match[1];
      this.messageSegments.push({ placeholder: placeholderName });
      this.placeholderValues[placeholderName] = '';
      lastIndex = regex.lastIndex;
    }
    // 添加最后一段静态文本
    if (lastIndex < this.originalMessage.length) {
      this.messageSegments.push(this.originalMessage.slice(lastIndex));
    }
  }

  // 根据输入值生成最终字符串
  generateFinalString() {
    let result = this.originalMessage;
    Object.keys(this.placeholderValues).forEach(key => {
      const placeholder = `[${key}]`;
      // 全局替换所有相同占位符（如果有重复的话）
      result = result.replace(new RegExp(placeholder, 'g'), this.placeholderValues[key]);
    });
    this.finalMessage = result;
  }
}

2. Component.html 代码 #

<div class="message-editor">
  <ng-container *ngFor="let segment of messageSegments">
    <!-- 渲染静态文本 -->
    <span *ngIf="typeof segment === 'string'">{{ segment }}</span>
    <!-- 渲染绑定了值的输入框 -->
    <input 
      *ngIf="typeof segment !== 'string'"
      [(ngModel)]="placeholderValues[segment.placeholder]"
      placeholder="{{ segment.placeholder }}"
      type="text"
      class="placeholder-input"
    >
  </ng-container>
</div>

<button (click)="generateFinalString()" class="generate-btn">生成最终文本</button>

<div class="final-result">
  <h4>最终结果：</h4>
  <p>{{ finalMessage }}</p>
</div>

方案二：使用 [innerHTML] 渲染HTML（临时方案） #

如果不想拆分字符串，可以用[innerHTML]直接渲染HTML，但需要手动处理输入值的获取，这种方式依赖原生DOM操作，不推荐在复杂组件中使用。

1. Component.ts 代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-message-editor',
  templateUrl: './message-editor.component.html',
  styleUrls: ['./message-editor.component.css']
})
export class MessageEditorComponent {
  originalMessage = 'Dear Mr. [Father_name], your son/daughter [name] not attend class today.';
  message = '';
  finalMessage = '';

  ngOnInit() {
    this.convertStringToInputs();
  }

  convertStringToInputs() {
    let tempMessage = this.originalMessage;
    const matches = tempMessage.match(/\[(.*?)\]/g);
    
    if (matches) {
      for (const match of matches) {
        const placeholderName = match.slice(1, -1);
        // 直接插入input标签，添加data属性标记占位符名称
        tempMessage = tempMessage.replace(match, `<input type="text" data-placeholder="${placeholderName}" />`);
      }
    }
    this.message = tempMessage;
  }

  getFinalString() {
    let result = this.originalMessage;
    // 获取所有带data-placeholder属性的输入框
    const inputs = document.querySelectorAll('input[data-placeholder]');
    
    inputs.forEach(input => {
      const placeholder = `[${(input as HTMLInputElement).getAttribute('data-placeholder')}]`;
      result = result.replace(new RegExp(placeholder, 'g'), (input as HTMLInputElement).value);
    });
    this.finalMessage = result;
  }
}

2. Component.html 代码 #

<div [innerHTML]="message"></div>
<button (click)="getFinalString()">生成最终文本</button>
<p>{{ finalMessage }}</p>

关键说明 #

• Angular的插值{{}}会自动转义HTML，防止XSS攻击，所以必须用[innerHTML]才能渲染HTML标签，但这种方式不利于组件化和数据绑定。
• 拆分字符串片段的方案更符合Angular的响应式编程思想，能更好地维护输入值和模板的关系，也便于后续扩展（比如添加校验、自定义输入组件等）。

内容的提问来源于stack exchange，提问作者prashant kushwah