Angular 单元格渲染器在 init 中没有获得 ICellRendererParams

Posted 2023-03-28

【中文标题】Angular 单元格渲染器在 init 中没有获得 ICellRendererParams

【英文标题】：Angular cell renderers don't get ICellRendererParams in init

【发布时间】：2021-02-19 16:24:16

【问题描述】：

我正在尝试制作一个单元格渲染器，用于使用 Angular 将 IP 地址制作成可点击的 SSH 链接。渲染器组件：

import  Component, OnInit, OnDestroy  from "@angular/core";
import  DomSanitizer, SafeUrl  from "@angular/platform-browser";

import  ICellRendererAngularComp  from "ag-grid-angular";
import  ICellRendererParams  from "ag-grid-community";

const username = "me";

/**
 * SSHCellRendererComponent is an AG-Grid cell renderer that provides ssh:// links as content.
 */
@Component(
    selector: "ssh-cell-renderer",
    styleUrls: ["./ssh-cell-renderer.component.scss"],
    templateUrl: "./ssh-cell-renderer.component.html"
)
export class SSHCellRendererComponent implements ICellRendererAngularComp 

    /** The IP address or hostname to which the SSH link will point. */
    public get value(): string 
        return this.val;
    
    private val = "";

    /** The SSH URL to use. */
    public get href(): SafeUrl 
        const url = `ssh://$username@$this.value`;
        return this.sanitizer.bypassSecurityTrustUrl(url);
    

    constructor(private readonly sanitizer: DomSanitizer) 

    /** Called by the AG-Grid API at initalization */

    public refresh(params: ICellRendererParams): boolean 
        this.val = params.value;
        return true;
    

    /** called after ag-grid is initalized */
    public agInit(params: ICellRendererParams): void 
        console.log("has value?:", Object.prototype.hasOwnProperty.call(params, "value"));
        console.log("getval:", params.getValue());
        this.val = params.value;
    

然后模板看起来像：

<a [href]="href" target="_blank">value</a>

它应该是非常基本的，我在AngularJS中基本上完全做到了这一点，但它不起作用。这些单元格最终都包含如下所示的实际内容：

<a href="ssh://me@" target="_blank"></a>

我在agInit 中的那两个console.logs 告诉我原因：

16:34:38.554     has value?: false             ssh-cell-renderer.component.ts:62:10
16:34:38.555     getval: undefined             ssh-cell-renderer.component.ts:63:10

我不知道agInit（也可能是refresh）是什么类型的对象，但显然不是ICellRendererParams - 和getValue 也无济于事，因为无论如何原因它总是返回undefined。我可以访问data（从那里我可以看到被渲染的值实际上不是undefined），但是如果我想使用“IPv4 地址”列为 SSH 链接制作渲染器，并且一个“IPv6 地址”列，我需要两个几乎相同的组件，这是很多重复的代码。

那么我错过了什么？

【参考方案1】：

你用的简单吗

const username = "me";
export class SSHCellRendererComponent implements ICellRendererAngularComp 
public username = username;

在你的模板中

<a [href]="sanitizer.bypassSecurityTrustUrl('ssh://' + username +'@'+value)" target="_blank">value</a>

更新

在您的模板中使用 sanitizer 功能或创建 sanitizer 安全管道。

【讨论】：

那行不通。该 URL 将被 Angular 视为不安全，并且无法点击，即使属性已正确计算。

这行得通，但在恢复它检查后我发现我的原始代码似乎突然工作了。我不确定发生了什么变化，但对于任何试图做类似事情的人来说也是如此：注意将鼠标悬停在链接上（至少在 Firefox 中）不会显示用户，例如'ssh://admin@1.2.3.4' 显示在悬停时的小链接地址框中有 'ssh://1.2.3.4'