Angular中如何将Intro.js弹窗内输入框值绑定到类属性？

我正在使用Intro.js制作引导页，需要在引导弹窗中接收用户输入，但无法将输入框的数据绑定到类的checked属性。尝试过[(ngModel)] = checked、[(checked)] = checked、(checked) = checked均失败，请问该如何实现或是否可行？我期望输入框的值能赋值给类的checked属性，相关代码如下：

import {Injectable} from '@angular/core';
import * as IntroJs from 'intro.js/intro.js';

@Injectable({
    providedIn: 'root'
})
export class IntrojsService {

    introJs = null;
    checked = false;
    
    constructor() {
    }
    
    welcome() {
        this.introJs = IntroJs();
        this.introJs.start();
        this.introJs.setOptions({
            tooltipClass: 'customTooltip',
            steps: [
                {
                    title: '<img src="../../assets/default-logo.png" alt="logo" class="logo">',
                    intro: '<div class="tooltip-container">\n' +
                        '\n' +
                        '    <div class="tooltip-body">\n' +
                        '        <p>Welcome to the site!</p>\n' +
                        '        <input type="checkbox" ngModel #checked"/>\n' + //input here
                        '    </div>\n' +
                        '</div>\n',
                },
            ],
        }).oncomplete(() => {
            console.log(this.checked);
        }).start();
    }
}

Intro.js生成的引导弹窗DOM不在Angular的编译范围内，所以Angular的双向绑定指令[(ngModel)]无法生效，必须通过原生JavaScript事件监听来实现数据同步：

• 给输入框添加唯一标识
  修改步骤中的input标签，增加id以便后续获取DOM元素：

  <input type="checkbox" id="intro-checkbox"/>
  

• 绑定change事件同步值
  在Intro.js的钩子函数中获取输入框元素，添加change事件监听，实时将输入值同步到类的checked属性：

  welcome() {
      this.introJs = IntroJs();
      this.introJs.setOptions({
          tooltipClass: 'customTooltip',
          steps: [
              {
                  title: '<img src="../../assets/default-logo.png" alt="logo" class="logo">',
                  intro: '<div class="tooltip-container">\n' +
                      '\n' +
                      '    <div class="tooltip-body">\n' +
                      '        <p>Welcome to the site!</p>\n' +
                      '        <input type="checkbox" id="intro-checkbox"/>\n' +
                      '    </div>\n' +
                      '</div>\n',
              },
          ],
      })
      .onbeforechange((targetElement, stepIndex) => {
          // 仅对目标步骤绑定事件
          if (stepIndex === 0) {
              const checkbox = document.getElementById('intro-checkbox');
              if (checkbox) {
                  // 初始化输入框状态
                  checkbox.checked = this.checked;
                  // 监听切换事件同步值
                  checkbox.addEventListener('change', (e) => {
                      this.checked = (e.target as HTMLInputElement).checked;
                  });
              }
          }
      })
      .oncomplete(() => {
          console.log(this.checked);
      })
      .start();
  }
  

• 额外提示

  • Intro.js弹窗销毁时会连带移除DOM元素，无需手动清理事件监听
  • 若需要预设输入框状态，直接给checkbox的checked属性赋值即可
  • 注意步骤索引要和目标步骤对应，避免绑定错误

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