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

Question

我正在尝试制作一个单元格渲染器，用于使用 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 地址”列，我需要两个几乎相同的组件，这是很多重复的代码。

那么我错过了什么？

Answer 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 安全管道。