棱角单元渲染器不会在init中获得ICellRendererParams

Question

我正在尝试做一个单元渲染器，使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中拥有的两个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地址”列为SSH链接制作一个呈现器，我需要两个几乎相同的组件，这是很多重复的代码。

那我错过了什么？

Answer 1

你是用简单的

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

在你的模板里

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

已更新

在模板中使用消毒剂函数，或者创建消毒器安全管道。