让外部链接的url来自一个可变的角度

Question

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

所以我想做这样的事情：

组件.ts

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

component.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应用程序中，您在deactivateGuard中将默认值设置为false。因此，那里的导航被封锁了。

在这里，我需要用户确认是否使用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

好。如果链接以"0"开头；http[s]：//"；，angular不会认为这是内部链接。仅此而已。