Angular单元格渲染器无法在初始化中获取ICellRendererParams

问题描述

我正在尝试制作一个单元格渲染器，以使用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>

而我在console.log中拥有的两个agInit向我展示了原因：

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地址”列和“ IPv6地址”列中，我需要两个几乎完全相同的组件，这是很多重复的代码。

那我想念什么？

解决方法

您只是简单地使用

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

并在您的模板中

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

已更新

在模板中使用消毒剂功能或创建消毒剂安全管道。