Question

我的HTML中有这个：

<iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}{{{latitude}}|{{longitude}}|M%C3%85L}"></iframe>

通知 {{{latitude}} - 我想逃离第一个{

我试图放\{，但它不起作用。

错误为Missing expected : at the end of the expression

Answer 1

只需尝试

{{'{' + latitude + '}'}}

Answer 2

您可以使用%7B {和%7D }。这些只是URI编码的形式，Angular不应该尝试解析。

Answer 3

视图

<iframe [src]="'https://kart.1881.no/?direction={59.83006424|6.25588723|START}{' + latitude + '|' + longitude + '|M%C3%85L}' | safe"></iframe>

下一个管道应该可以帮到你

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

您可以覆盖插值，如

template: `
    <iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}{[[latitude]]|[[longitude]]|M%C3%85L}"></iframe>
  `,
interpolation: ['[[', ']]']

但无论如何你必须清理只能用属性（而非插值）绑定的url

<强> Plunker Example

Answer 4

使用+运算符连接所需的SRC

src="...{' + {{latitude}}+ '}...'"

Answer 5

使用html实体{

<iframe src="https://kart.1881.no/?direction={59.83006424|6.25588723|START}&#x007B;{{latitude}}|{{longitude}}|M%C3%85L}"></iframe>

如何在Angular中逃避花括号

5 个答案: