angular 生成路由 link

Question

我是 angular 的新手，我不知道如何在不导航的情况下以编程方式生成路由 link。

我正在使用 angular-slickgrid，我在某些列上有一个自定义格式化程序，需要生成一些 HTML 来呈现单元格，我想要一个 link到那里的一个单独的组件：

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]="[...]"' 但显然它没有得到评估。该函数中有没有办法在 return 之前生成 link，还是我必须对其进行硬编码？

我知道一个解决方案是有一个 onclick 事件并调用一个函数，该函数将执行 router.navigate 调用，但我没有这样做，因为我想这会生成 links 用户在悬停时看不到。

奖金问题，如果有人知道用 angular-slickgrid 为每个单元格定义上下文菜单的方法，我将不胜感激。看起来有一些上下文菜单选项，但其中 none 似乎有一个很好的方法来知道单击了哪个单元格，这就是为什么我试图在单元格本身中添加 link通过格式化程序，但这不是很漂亮。

我希望能够向该右键单击菜单添加一个条目“详细信息”，该菜单将 link 使用适当的参数添加到我的其他页面，具体取决于右键单击的单元格。

Answer 1

注意，我是 Angular-Slickgrid

的作者

你不应该在 Formatter 中添加 href link，它不安全（XSS 注入，比如 <script> 标签）并且它不应该被信任，你也不想要使用普通 href，因为这将重新加载整个页面（在 SPA 之外）...您应该做的是使用 click 事件，然后在单击该特定列时执行某些操作。这正是我在我们的项目中所做的，我的 Formatter 使它看起来像 link 但实际上用户可以单击单元格中的任何位置（大多数用户永远不会注意到这一点，特别是如果您的列宽是文本的大小）和事件处理程序，您可以在停留在 SPA（单页应用程序）的同时进行 Angular 路由更改。

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

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

对于假的 hyperlink，我有这个简单的 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;
  }
}

最后要注意的是，为了给您更详细地描述我们的项目，如果用户单击具有伪造 link 的列，它将执行通过 switch case 的点击处理程序并将路由到特定的用户详细信息页面，但是如果用户单击其他任何地方，它将打开一个侧边栏（我们使用 Bootstrap 列。为了快速解释我如何做侧边栏，我只是用 Bootsrap 更改网格容器类从 col-sm-12 到 col-sm-8 和侧边栏到 col-sm-4 然后调用网格调整大小（当我关闭它时反之亦然）。我们的侧边栏就像一个快速视图（一个精简的详细信息页面）在另一端，如果他们点击假的 hyperlink 列，它将打开完整的用户详细信息页面。

您还可以通过上下文菜单、网格菜单等重用此概念...

试一试...如果您喜欢该库，请加星 ;)

angular 生成路由 link

angular generate routing link

javascript

angular

angular-slickgrid