角度生成路由链接

Question

我对 angular 很陌生，如果不导航到它，我无法弄清楚如何以编程方式生成路由链接。

我正在使用角度光滑网格，并且在某些列上有一个自定义格式化程序，需要生成一些 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.naving调用，但我没有这样做，因为我认为这将生成用户在悬停时看不到的链接。

奖励问题，如果有人知道一种使用角度光滑网格为每个单元格定义上下文菜单的方法，我将不胜感激。 看起来有几个上下文菜单选项，但它们似乎都没有很好的方法来知道单击了哪个单元格，这就是为什么我尝试通过格式化程序在单元格本身中添加链接，但这不是很漂亮。

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

Answer 1

注意，我是Angular-Slickgrid的作者

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

所以就像我说的，我有一个自定义格式化程序，让它看起来像一个超链接，这是代码(在我们的例子中带有翻译(

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，然后调用网格调整大小(反之亦然当我关闭它时(。我们的侧边栏就像另一端的快速视图(精简的详细信息页面(，如果他们单击虚假超链接列，它将打开完整的用户详细信息页面。

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

试一试...和星点赞，如果你喜欢库;)