Angular多语言构建下如何用纯锚点实现语言切换？

我使用Angular i18n实现搭建了网站，生成了两个可独立正常运行的构建产物：

• /dist/pt/
• /dist/en/

现在想要实现语言切换功能，原本希望仅通过简单的锚点链接（<a>）即可完成，但测试多种方案后，要么出现新语言路径追加到当前路径后的情况（如/pt/en），要么跳转到了正确的URL（如/en）但该URL在当前构建范围内不存在，导致404页面。

测试过的无效写法包括：

• <a href="/en">
• <a href="./en">
• <a href="../en">
• <a routerLink="/en">
• <a routerLink="./en">
• <a routerLink="../en">
• <a [href]="prop">（其中prop = "/en"）

1. 先确保构建时配置正确的base href #

每个语言版本是独立的Angular应用，构建时需要指定对应子目录作为基准路径：

# 构建葡萄牙语版本
ng build --localize --base-href /pt/
# 构建英语版本
ng build --localize --base-href /en/

这会让每个应用的资源路径都基于各自的子目录，避免资源加载错误。

2. 使用带rel="external"的绝对路径链接 #

Angular Router默认会拦截所有<a>标签的点击，尝试用应用内路由处理。添加rel="external"可以跳过这种拦截，让浏览器直接导航到目标URL：

<!-- 葡萄牙语页面切换到英语 -->
<a href="/en/" rel="external">English</a>
<!-- 英语页面切换到葡萄牙语 -->
<a href="/pt/" rel="external">Português</a>

绝对路径/en/直接指向网站根目录下的英语版本构建产物，不会出现路径追加的问题。

3. 备选方案：用target="_self"强制跳转 #

如果rel="external"不生效，也可以添加target="_self"，强制浏览器重新加载目标路径：

<a href="/en/" target="_self">English</a>

这样就能完全通过<a>标签实现语言切换，不需要编写任何切换函数。

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