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.log 告诉我为什么：

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 也对我没有帮助，因为无论出于何种原因，它总是 returns 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>

已更新

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

Angular 单元格渲染器未在 init 中获取 ICellRendererParams

Angular cell renderers don't get ICellRendererParams in init

typescript

ag-grid

ag-grid-ng2

angular

ag-grid-angular