angular生成路由链接
我是angular的新手，我不知道如何在没有导航到的情况下以编程方式生成路由链接。
我正在使用angular-slickgrid，我在一些列上有一个自定义格式化程序，它需要生成一些HTML来呈现单元格，并且我希望在其中有一个指向单独组件的链接：
const formatZoneCell: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid?: any) =>
{
if (value === undefined) { return (""); }
var zone = 0;
return (`<span>${value} - <a ?>details</a></span>`);
}我试过一些东西，在哪里？就像‘routerLink=’...‘’但很明显，它不会被评估。在函数中有没有办法在返回之前生成链接，或者我必须硬编码它？
我知道一个解决方案是有一个onclick事件，然后调用一个函数，然后进行router.navigate调用，但我没有这样做，因为我想这会产生用户在悬停时看不到的链接。
另外一个问题，如果有人知道用angular-slickgrid为每个单元格定义上下文菜单的方法，我将不胜感激。它看起来像是有一些上下文菜单选项，但它们似乎没有一个好的方法来知道哪个单元格被点击了，这就是为什么我试图通过格式化程序在单元格中添加一个链接，但这并不是很好。
我希望能够添加一个条目“详细信息”到右击菜单，它将链接到我的其他页面与适当的参数取决于哪个单元格被右击。
回答 1
Stack Overflow用户
发布于 2020-06-26 18:50:18
注意，我是Angular-Slickgrid的作者
你不应该在格式化程序中添加href链接，这是不安全的(XSS注入，就像<script>标签一样)，它不应该被信任，而且你也不想使用普通的href，因为这会重新加载整个页面(在SPA之外)……您应该做的是使用click事件，并在单击该特定列时执行一些操作。这正是我在我们的项目中所做的，我的格式化程序让它看起来像一个链接，但实际上用户可以在单元格中的任何地方单击(大多数用户永远不会注意到这一点，特别是如果您的列宽是文本的大小)，并且从事件处理程序中，您可以在停留在SPA (Single Page App)的同时进行角度路由更改。
所以就像我说的，我有一个自定义格式化程序，让它看起来像一个超链接，下面是代码(在我们的例子中有翻译)
import { Formatter, Column } from 'angular-slickgrid';
export const openFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
const gridOptions = (grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {};
const translate = gridOptions.i18n;
let output = '';
if (translate && translate.instant) {
const openTxt = translate.instant('OPEN');
const openForDetailTxt = translate.instant('OPEN_FOR_DETAILS');
output = `<span class="fake-hyperlink" title="${openForDetailTxt}">${openTxt}</span>`;
}
return output;
};对于假的超链接，我有一个简单的SASS样式
.fake-hyperlink {
cursor: pointer;
color: blue;
&:hover {
text-decoration: underline;
}
}在视图中，我通过(sgOnClick)查看了一个单元click事件
<angular-slickgrid
gridId="userGrid"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
(onAngularGridCreated)="angularGridReady($event)"
(sgOnClick)="handleOnCellClick($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>在组件中，对于单元格单击处理程序，我在列名上切换大小写，当我知道用户单击了该列时，我就执行我的操作(在下面的示例中，它是列字段userNumber)，从args中，您可以获得grid，并使用常规的SlickGrid方法获得您想要的大部分内容。
handleOnCellClick(event, args) {
const grid = args.grid;
const selectedUser = grid && grid.getDataItem(args.row) as User;
const columnDef = grid && grid.getColumns()[args.cell];
const field = columnDef && columnDef.field || '';
switch (field) {
case 'userNumber':
const url = `/users/${selectedUser.id}`;
// we can also look at the Event used to handle Ctrl+Click and/or Shift+Click
if (event.ctrlKey || event.shiftKey) {
const openUrl = this.location.prepareExternalUrl(url);
window.open(openUrl, '_blank'); // open url in a new Browser Tab
} else {
this.router.navigateByUrl(url); // or open url in same Tab
}
break;
default:
// clicked on any other column, do something else?
// for example in our project we open a sidebar detail view using Bootstrap columns
// this.openSidebar();
break;
}
}在最后的说明，给你一个更详细的说明我们的项目，如果用户点击列，其中有假链接，它将执行点击处理程序通过开关的情况下，将路由到特定的用户详细信息页面，如果用户点击任何其他地方，它将打开一个侧边栏(我们使用Bootstrap列。为了快速解释我是如何做侧边栏的，我简单地将带有Bootsrap类的网格容器从col-sm-12更改为col-sm-8，并将侧边栏更改为col-sm-4，然后调用网格调整大小(当我关闭它时，反之亦然)。我们的侧边栏就像是另一端的快速视图(一个精简的详细信息页面)，如果他们点击假的超链接列，它将打开完整的用户详细信息页面。
你也可以通过上下文菜单、网格菜单等来重用这个概念。
试一下..。如果你喜欢自由党，还可以得到星级赞成票;)
https://stackoverflow.com/questions/62599526
复制相似问题
腾讯云开发者
