Angular - 用动态值替换嵌入式标签答案

【问题标题】：Angular - Replace the Embedded tag with dynamic valueAngular - 用动态值替换嵌入式标签
【发布时间】：2021-03-10 02:15:03
【问题描述】：

我需要将动态值替换为来自后端并带有嵌入标签的静态语句。

例如文本是下面的“当前日期”，需要从 API 响应中替换为值对象中提到的值。

申请开放日期是##CurrentDate##

价值：{ 键：“当前日期”，值：“2021 年 9 月 10 日” }

任何建议，如何在 Angular 中实现？

【问题讨论】：

标签： angular string interpolation directive

【解决方案1】：

根据您的要求，简单的解决方案是您可以通过简单的数据绑定来实现。为引用元素分配一个初始值，并在收到 API 值后更改默认值，如下所示。

public openDate = 'CurrentDate';

接收数据后，只需重新分配相应变量的值。

apicall.subscribe(data=>this.openDate=data.value);

如果您需要通用解决方案，请使用 angular 中的自定义指令。创建您自己的自定义指令并实现您的逻辑。

import { Directive, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[value-transform]'
})
export class ValueTransformDirective {
@Input() apiData: string;
  constructor(private el: ElementRef) {}

  ngOnInit() {
    if(apiData.value)
    this.elem.nativeElement.innerText=apiData.value;
   }
}

在您的 HTML 文件中，您可以访问自定义指令，如下所示

<div value-transform [apiData]="value">CurrentDate</div>

确保您在 [apiData]

中传递值

【讨论】：