角度生成路由链接 [英] angular generate routing link

问题描述

我对angular还是很陌生，我不知道如何在不导航的情况下以编程方式生成路由链接.

I'm very new to angular, and I can't figure out how to generate a routing link programmatically without navigating to it.

我正在使用angular-slickgrid，并且在某些列上有一个自定义格式器，需要生成一些HTML来呈现单元格，并且我想在其中具有指向单独组件的链接:

I'm using angular-slickgrid and I have a custom formatter on some columns that needs to generate some HTML to render the cell, and I'd like to have a link to a separate component in there :

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

I've tried a few things where the ? is, like '[routerLink]="[...]"' but clearly it doesn't get evaluated. Is there a way in that function to generate the link before the return, or do I have to hardcode it ?

我知道一个解决方案是拥有一个onclick事件并调用一个函数，该函数随后将执行router.navigate调用，但是我没有走这条路，因为我想这会生成用户看不到链接的链接悬停.

I know a solution is to have an onclick event and call a function that will then do a router.navigate call, but I haven't gone this way since I imagine that'll generate links the user can't see when hovering.

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

Bonus question, if anyone knows of a way to define a context menu per cell with angular-slickgrid I'd be grateful. It looks like there's a few context menu options but none of them seem to have a good way to know which cell was clicked on, which is why I'm trying to add a link in the cell itself through a formatter, but that's not very pretty.

我希望能够添加一个条目"details"，右键单击菜单，该菜单会根据右键单击的单元格使用适当的参数链接到我的其他页面.

I'd love to be able to add an entry "details" to that right click menu that would link to my other page with the proper parameters depending on which cell was right clicked on.

推荐答案

注意，我是Angular-Slickgrid的作者

Note, I'm the author of Angular-Slickgrid

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

You shouldn't add an href link in a Formatter, it's not safe (XSS injection, like <script> tag) and it shouldn't be trusted, also you don't want to use a plain href since that will reload the entire page (outside of the SPA)... What you should do instead is use the click event and when that particular column is clicked then do something. That is exactly what I've done in our project, my Formatter makes it look like a link but in reality the user can click anywhere in the cell (most user will never notice that, especially so if your column width is the size of the text) and from an event handler you can do an Angular route change while staying in the SPA (Single Page App).

就像我说的，我有一个自定义格式化程序，使其看起来像一个超链接，这是代码(在我们的情况下为翻译内容)

So like I said, I have a Custom Formatter to make it look like an hyperlink and here is the code (with translation in our case)

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样式

For the fake hyperlink, I have this simple SASS styling

.fake-hyperlink {
    cursor: pointer;
    color: blue;
    &:hover {
        text-decoration: underline;
    }
}

在视图中，我通过(sgOnClick)

<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方法获得所需的大部分内容.

and in the Component, for the cell click handler I do a switch case on the column name and when I know the user clicked on that column I then do my action (in the example below, it's the column field userNumber), from the args you can get the grid and get most of what you want with regular SlickGrid methods.

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列.为了快速说明我如何创建侧边栏，我只需使用 col-sm-12中的Bootsrap类更改网格容器到 col-sm-8 ，边栏到 col-sm-4 ，然后调用网格调整大小(当我关闭它时，反之亦然).我们的侧边栏就像另一端的快速视图(简洁的详细页面)，如果他们单击虚假的超链接列，则将打开完整的用户详细信息页面.

On a final note and to give you a more detailed description of our project, if the user clicks on the column which has the fake link it will then execute the click handler pass through the switch case and will route to the particular user detail page, if however the user clicks anywhere else it will open a sidebar (we use Bootstrap Columns. For a quick explanation of how I do a sidebar, I simply change the grid container with Bootsrap classes from col-sm-12 to col-sm-8 and the sidebar to col-sm-4 and then call a grid resize (and vice-versa when I close it). Our sidebar is like a quick view (a condensed detail page) on the other end if they click on the fake hyperlink column it will open the full user detail page.

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

You can also reuse this concept with a Context Menu, Grid Menu, etc...

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

Give it a try... and a Star upvote if you like the lib ;)

这篇关于角度生成路由链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！