外部链接的 url 来自变量 Angular

Question

我有一种情况，我想通过 api 从数据库获取一些 url，然后在我的页面上添加这些（外部）链接。

所以我想做这样的事情：

组件.ts

public url: string;

ngOnInit(): void {
  this.url = getFromAPI()
}

组件.html

<a href="{{url}}"> here's a link </a>

但对于我的生活，我不知道该怎么做。 我尝试在这里使用属性指令方法： https://stackblitz.com/edit/angular-external-links?file=src%2Fapp%2Fexternal-url.directive.ts

但我一定做错了，因为它对我不起作用；我的链接仍然显示为 https://localhost:4200/urlFromAPI

我也尝试过这里描述的方法： https://kevinphelps.me/blog/2017-06-30-handling-external-links-in-angular

但是我的链接根本不起作用。单击它们不会执行任何操作。

有没有一种我缺少的简单方法可以做到这一点？或者这在 Angular 中实际上很难吗？

Answer 1

在您的 stackblitz 应用程序中，您将默认值设置为

false

中的

deactivateGuard

。于是，那边导航就被堵住了。

这里，我需要用户确认是否使用

window.confirm('Are you sure?')

进行导航。

在你的routing.module.ts文件中：

{
   provide: deactivateGuard,
   useValue: () => {
     console.log('Guard function is called!')         
     return window.confirm("Are you sure?");
   }
}

参考：https://stackblitz.com/edit/angular-external-links-aph8hk?file=src%2Fapp%2Frouting.module.ts

如果有效请告诉我。

Answer 2

好的。如果链接以“http[s]://”开头，Angular 不会认为它是内部链接。仅此而已。

Answer 3

我遇到了确切的问题，我使用了这个

const url = 'YOUR_EXTERNAL_URL';
window.open(url, '_blank');