0

我有以下组件

@Component({
    selector: 'app-models-sd-htmlview',
    styleUrls: ['./sd.component.scss'],
    template: `
        <iframe id="htmlview" style="width:100%; height:200%;" [src]="iframe"></iframe>
    `
})
export class HtmlViewComponent implements OnInit {
    @Input() urlhash;
    @Input() predictiontag;

    public iframe;

    constructor(public sanitizer: DomSanitizer)
    {
        this.sanitizer = sanitizer;
    };

    ngOnInit()
    {
        var url = "http://localhost:8080/htmlview/" + this.urlhash + "/" + this.predictiontag + ".html";
        this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

<app-models-sd-htmlview [urlhash]="urlhash" [predictiontag]="predictiontag"></app-models-sd-htmlview>

但是当我渲染一切时，这就是我所看到的。this.urlhash和的值this.predictiontag未定义。 在此处输入图像描述

4

2 回答 2

0

一个简单*ngIf的将阻止组件在变量未定义时实例化。

<app-models-sd-htmlview *ngIf="urlhash && predictiontag" [urlhash]="urlhash" [predictiontag]="predictiontag">

这假设您的两个变量在某个时候被定义。如果不是，那么问题出在父组件上。

于 2022-02-04T20:25:53.553 回答
0

出于某种原因，在父级中获取 'urlhash' 和/或 'predictiontag' 的值需要时间，因此在执行 ngOnInit() 方法时，它们还没有“绑定”到“HtmlViewComponent”组件。

尝试这个小改动，以实现 'iframe' 属性仅在 'urlhash' 和 'predictiontag' 获取其值时尝试获取其值：

export class HtmlViewComponent implements OnInit {
@Input()
  set data (data : {
    urlhash: string;
    predictiontag: string;
  }) {
    var url = "http://localhost:8080/htmlview/" + data.urlhash + "/" + data.predictiontag + ".html";
    this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
...
ngOnInit() {}
...

在您的父 HTML 中：

<app-models-sd-htmlview [data]="{ urlhash: urlhash, predictiontag: predictiontag }">
</app-models-sd-htmlview>

注意：如果它工作正常，可能这个缩短的形式也可以工作：

<app-models-sd-htmlview [data]="{ urlhash, predictiontag }">
</app-models-sd-htmlview>
于 2022-02-04T19:55:00.113 回答