代码之家  ›  专栏  ›  技术社区  ›  ocket8888

角度单元渲染器在init中不获取IcellRenderParams

  •  1
  • ocket8888  · 技术社区  · 5 年前

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

    我不知道他们给了什么样的东西 阿吉尼特 (而且可能 refresh 但显然不是 ICellRendererParams -及 getValue 也帮不了我,因为不管出于什么原因,它总是会回来 undefined 1.我有权访问 data (从中我可以看出,所呈现的价值实际上不是 未定义 ),但如果我想使用“IPv4地址”列和“IPv6地址”列为SSH链接制作一个呈现程序,我需要两个几乎相同的组件,这是大量重复的代码。

    那么我错过了什么?

    1 回复  |  直到 5 年前
        1
  •  0
  •   Filip    5 年前

    你用的是简单的吗

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

    在你的模板中

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

    更新

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