用于构建动态 HTML 的最合适的 Angular 组件/指令/管道是什么？

Question

（我从 React 来到 Angular，所以如果它看起来以 React 为中心，请原谅我的问题。）

我需要创建一个 Angular 组件，该组件接受一个字符串和该字符串中的术语列表以显示工具提示。

const sentence = "The fox jumped over the moon.";

const tooltips = {
  "text": "jumped over",
  "tooltip": "Blah blah blah."
}, {
  "text": "moon",
  "tooltip" "Object seen in the sky at night."
};

output 预计如下所示：

<div>The fox <span onclick="showTooltip(0)">jumped over</span> the <span onclick="showTooltip(1)">moon</span>.</div>
<div id="tooltip_0">Blah blah blah</div>    
<div id="tooltip_1">Object seen in the sky at night.</div>    

用于创建此动态结构的最合适的 Angular 组件/指令/管道是什么？

Answer 1

在 Angular 中，您可以使用@Input()从父组件获取值。

在您的child.ts中，您将拥有：

@Input() textInput: string;

在您的parent.html ，您将拥有：

<app-child-component [textInput]="variableText"></app-child-component>

然后，您将能够将child.ts中的textInput用作任何其他变量。

更多详细信息： https://angular.io/guide/component-interaction