Angular 16+：如何在TypeScript文件中创建超链接？

你之前的写法问题出在用了转义的<和>，导致最终渲染的是纯文本而非HTML元素。以下是不同场景的解决方案：

React项目推荐方案 #

方案1：直接定义React元素（最安全） #

// consts.ts
import React from 'react';
export const LINK1 = <a href="https://sample.com/">LINK 1</a>;

在组件里直接使用：

{LINK1}

方案2：使用HTML字符串+dangerouslySetInnerHTML #

注意：此方法存在XSS风险，仅当内容完全可信时使用

// consts.ts
export const LINK1 = '<a href="https://sample.com/">LINK 1</a>';

组件中渲染：

<div dangerouslySetInnerHTML={{ __html: LINK1 }} />

普通JS/HTML项目方案 #

// consts.ts
export const LINK1 = '<a href="https://sample.com/">LINK 1</a>';

在页面中通过innerHTML插入到DOM：

document.getElementById('your-container-id').innerHTML = LINK1;

核心要点：不要对<和>做转义，保留原生HTML标签格式，再通过对应框架或原生DOM的方法解析渲染。

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