Question

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

可以说，我想在某些组件视图中添加指向我的应用程序页面的链接。

静态方法是：

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

问题：如果我在路线中将“目标页面”的名称更改为“目标页面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>

但是，问题是视图无法访问函数“ getLink（）”，我必须在每个component.ts中重新创建它。是否有办法自动在每个component.ts中包含此功能或在视图中全局访问它？

Answer 1

创建服务ng g service common。

然后在服务文件中设置功能。</ p>

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

在提供商中添加服务。 `//不是必需的，这取决于您的角度版本。

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

在构造函数中添加服务

constructor(private commonService:CommonService){
}

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

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

1 个答案: