Блог

Я пытаюсь создать средство визуализации ячеек для преобразования IP-адресов в SSH-ссылки, доступные для перехода, с помощью Angular. Компонент средства визуализации:

 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 ), но тогда, если бы я хотел создать средство визуализации для SSH-ссылок, используя столбец «IPv4-адрес» и столбец «IPv6-адрес», мне понадобились бы два почти идентичных компонента, которыемного дублированного кода.

Итак, что я упускаю?

Вы использовали просто

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

и в вашем шаблоне

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

Обновлено

Используйте функцию дезинфицирующего средства в своем шаблоне или создайте канал безопасности дезинфицирующего средства.