Question

我对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为每个单元格定义上下文菜单的方法，我将不胜感激。似乎有一些上下文菜单选项，但是似乎没有一个知道单击哪个单元格的好方法，这就是为什么我试图通过格式化程序在单元格本身中添加链接的原因，但这并不是很漂亮。

我希望能够在该右键单击菜单上添加一个“详细信息”条目，该菜单项将根据适当的参数链接到我的其他页面，具体取决于右键单击哪个单元格。

Answer 1

注意，我是Angular-Slickgrid的作者

您不应该在Formatter中添加href链接，因为它不安全（XSS注入，例如<script>标签），也不应该受到信任，而且您也不想使用纯href，因为这将重新加载整个页面（在SPA之外）...您应该做的是使用click事件，然后单击该特定列，然后执行某些操作。这正是我在项目中所做的事情，我的Formatter使它看起来像一个链接，但实际上用户可以单击单元格中的任何位置（大多数用户永远不会注意到这一点，尤其是如果您的列宽等于文字），然后可以从事件处理程序中更改Angular路由，同时保留在SPA（单页应用）中。

就像我说的，我有一个自定义格式化程序，使它看起来像一个超链接，这是代码（在我们的案例中带有翻译）

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;
    }
}

在“视图”中，我通过click观看了一个单元格(sgOnClick)

<angular-slickgrid
         gridId="userGrid"
         [columnDefinitions]="columnDefinitions"
         [gridOptions]="gridOptions"
         (onAngularGridCreated)="angularGridReady($event)"
         (sgOnClick)="handleOnCellClick($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>

，在组件中，对于单元格单击处理程序，我在列名称上进行了大小写切换，当我知道用户单击该列时，我便执行了操作（在下面的示例中，这是列字段{{1 }}），您可以从userNumber中获得args，并通过常规SlickGrid方法获得所需的大部分信息。

grid

最后，为了给您提供有关我们项目的更详细说明，如果用户单击具有虚假链接的列，则它将执行单击处理程序，并通过切换用例，并将其路由到特定用户详细信息页面，但是如果用户单击其他任何地方，它将打开一个侧边栏（我们使用Bootstrap列。为了快速说明我如何创建侧边栏，我只需将带有Bootsrap类的网格容器从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; } }更改为{{ 1}}，然后将侧边栏移至col-sm-12，然后调用网格调整大小（当我关闭网格时，反之亦然）。伪造的超链接列，它将打开完整的用户详细信息页面。

您还可以通过上下文菜单，网格菜单等重复使用此概念。

尝试一下...如果您喜欢lib，还可以进行Star投票；）

角度生成路由链接

1 个答案: