Question

我对Angular还是很陌生，所以如果我在问题中使用了一些错误/怪异的术语，请原谅我。

我有这个Angular组件，它可以根据用户的输入来计算两个不同的URL。现在，我想将计算出的URL注入关联的角度组件中，以便最终的HTML将产生具有以下行为的div： -在后台加载静态图片（由url2引用）； -单击后，将动态添加一个iframe（引用url1）作为主div的子元素

请参见下面相应的TypeScript代码（简化后使其易于阅读）：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Store } from '@ngrx/store';

@Component({
    selector: 'my-component-selector',
    template: `
        <table  width="100%">
            <tr>
                <td>
                    <div class="ng-scope embed-responsive embed-responsive-16by9">
                        <div class="embed-responsive-item" onclick="$('<iframe>',{src:'URL1 PLACEHOLDER',style:'border:0;width:100%;height:100%;',frameborder:0,allowfullscreen:true,scrolling:'no'}).appendTo(this);" style="background-image:url('URL2 PLACEHOLDER');background-size:contain;background-position:center center;background-repeat:no-repeat;cursor:pointer;"></div>
                    </div>
                </td>
            </tr>
        </table>
    `
})

export class MyComponent implements OnInit{

    url1;
    url2;

    constructor(private store: Store<State>, private sanitizer: DomSanitizer) {
        this.url1 = 'https://my.url.com/remote?param1=10&param2=20';
        this.url2 = 'https://my.url.com/remote?param1=30&param2=40';
    }

    ngOnInit() {
        this.url1 = 'https://my.url.com/remote?param1=10&param2=20';
        this.url2 = 'https://my.url.com/remote?param1=30&param2=40';
    }
}

如果我直接在Angular组件代码中编写两个URL，那么一切都可以正常工作（请参阅URL1 PLACEHOLDER和URL2 PLACEHOLDER）。但是，我正在努力尝试在相应的占位符中使用类变量“ url1”和“ url2”的内容。

我尝试使用“ this.url1”和“ this.url2”，{{url1}}和{{url2}}，{{this.url1}}和{{this.url2}}以及其他一些选项，包括在iframe代码中使用“ [src]”之类的变量内容出价，但所有这些操作最终都会出错，或者变量名称本身会添加到生成的HTML代码中。

有人可以告诉我该如何做吗？

谢谢！

Answer 1

而不是通过jquery方式实现。单击图像时，可以使用ngIf轻松地以Angular Way方式完成加载iframe。

https://stackblitz.com/edit/angular-2b4oqr

Angular-如何在组件模板中引用类变量？

1 个答案: