整个应用程序中的 Angular 动态链接

Question

我试图找出在 Angular 应用程序中实现动态链接的正确方法是什么。可能我正在重新发明轮子。

假设在某些组件 View 中我想添加指向我的应用程序页面的链接。

静态方法是:

<a routerLink="/target-page/">Target Page</a>

问题:如果在我的 route 将名称“target-page”更改为“target-page-2”，我必须在使用的每个页面中编辑此链接。

我正在考虑创建一个新的 js 文件来收集链接，然后始终从该文件生成链接。

文件:'links.ts'(我会在任何地方都包含它)

links: Array<{ name: string; path: string }> = [
   { name: 'home', path: '/homepage/' },
   { name: 'register', path: '/registration-page/' }
];

function getLink(name: string){
   return links.filter(e=>e.name===name).pop().path;
}

文件:'someview.html'

<a routerLink="{{ getLink('register') }}">Register</a>

但是，问题是 View 无法访问函数“getLink()”，我必须在每个 component.ts 中重新创建它。有没有一种方法可以在每个 component.ts 中自动包含此函数或在 View 中全局访问它？

Answer 1

创建服务ng g service common。

然后在服务文件中设置函数。

getlink(name: string){
    return links.filter(e=>e.name===name).pop().path;
}

在提供商中添加服务。 `//不需要，这取决于您的 Angular 版本。

然后，在组件中导入服务。

在构造函数中添加服务

constructor(private commonService:CommonService){
}

//Now call function where you want 
let link = this.commonService.getLink('login');
console.log("Link",link);