我如何在 Angular 中转义花括号

Question

I have this in my HTML:

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

Notice {{{latitude}} - Here I want to escape the first {

I tried to put \\{ but it not work as well.

The error is Missing expected : at the end of the expression

Answer 1

简单地尝试

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

Answer 2

You could try with %7B for { and %7D for } . Those are just the URI-encoded forms, which Angular shouldn't try to parse.

Answer 3

view

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

And the next pipe should help you

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);
    }
}

You can override interpolation like

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

but anyway you have to sanitize url that will work only with property(not interpolation) binding

Plunker Example

Answer 4

Use the + operator to concatenate the required SRC

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

(Update: added brackets to src )

Answer 5

使用 html 实体{

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