NodeJS渲染html文件，表单在角度侧不起作用答案

【问题标题】：NodeJS render html file with form not working on angular sideNodeJS渲染html文件，表单在角度侧不起作用
【发布时间】：2020-01-22 14:48:01
【问题描述】：

我正在使用 ExpressJS 和 EJS 模板视图引擎。我试图在 angular 组件上显示一个 HTML 文件，但表单标签及其子输入标签在 angular 端不起作用。它们只显示标签数据。

在 NodeJS 上

agreementController.js

exports.getAgreementHtml = async (request, response, next) => {
    const params = request.query
    let reqPath = path.join(__dirname, '../agreements');
    var agreementObj = {
        user: { email: "example@gmail.com" }
    }
    // render domestic rent html
    ejs.renderFile(reqPath + '/domestic_rent.ejs', agreementObj, {}, function (err, str) {
        if (err !== null) {
            responseObj.status = errorCodes.DATA_NOT_FOUND
            responseObj.message = language.getMessage('NO_RECORD_FOUND')
            response.send(responseObj)
            return
        }

        responseObj.status = errorCodes.OK
        responseObj.data = str
        response.send(responseObj);
        return;
    });
}

domestic_rent.js

  <form>
    <div class="form-group">
        <p><%= user.email %></p>
        <div class="col-sm-offset-2 col-sm-10">
            <input type="text" class="form-control" id="inputEmail3" placeholder="test" required name="test">
        </div>
    </div>
</form>

在 Angular 8 侧

agreement-show.component.ts

  getAgreementData() {
    const params = {
      id: this.agreementId
    };
    this.agreementService.getAgreementHtml(params).subscribe(
      (result) => {
        console.log('result agreement data::: ', result);
        if (result.status !== 200) {
          this.commonService.change.emit({ status: 'error', message: 'unknown error' });
          return;
        }
        this.someHtml = result.data;
        return;
      }, (error) => {
        console.log('error', error)
        this.commonService.change.emit({ status: 'error', message: error.message });
      }
    );
  }

agreement-show.component.html

<div [innerHTML]="someHtml"></div>

Output Attachment

【问题讨论】：

您能否详细说明错误或正在发生什么类型的输出？
@Nelles 我在问题中添加了输出附件，请检查
在这个问题中 nodeJS 来自哪里，查看代码你的角度模块没有按预期工作。您是否检查过您的 API 是否正确响应预期数据？

标签： node.js angular angular8

【解决方案1】：

通过使用 ElementRef 函数，我们可以添加 html 运行时。请使用以下步骤：

        @ViewChild('showitems') showitems: ElementRef;

        const elemt: HTMLElement = this.showitems.nativeElement;
        this.someHtml = result.data;
        elemt.innerHTML = this.someHtml;

【讨论】：