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

【问题标题】：Angular - How to reference class variables in a component template?Angular - 如何在组件模板中引用类变量？
【发布时间】：2019-03-12 15:37:17
【问题描述】：

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

我有这个 Angular 组件，它根据用户的输入计算两个不同的 url。现在，我想将计算得到的 url 注入到相关的 angular 组件中，以便最终的 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 代码中。

有人能告诉我如何引用吗？

提前致谢！

【问题讨论】：

标签： jquery angular components

【解决方案1】：

而不是用 jquery 方式实现这一点。当我们单击图像时，您可以使用 ngIf 以 Angular 方式轻松完成加载 iframe。

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

【讨论】：

嗨，Suresh，感谢您的意见，但您的建议无效。