如何在Angular 2中显示文字{{ [英] How do you display a literal {{ in Angular 2

问题描述

我在Angular2 rc 1中有一个模板，我需要在其中显示来自另一种语言的大量代码.该语言中有{{.

I have a template in Angular2 rc 1 where I need to display a chunk of code from a different language. That language has {{ in it.

import {Component, Input} from '@angular/core';

@Component({
    selector: 'blue-box',
    template: `
        <div class="blue-box">
            <div class="blue-box-title">{{boxTitle}}</div>
            {{define "bob"}}This is the template bob{{end}}
            <span>
                <ng-content></ng-content>
            </span>
        </div>
    `,
    styleUrls: ['../css/blue-box.css'],
})
export class BlueBox {

    @Input() boxTitle: string;

    constructor() {
    }

}

如何让模板处理器将{{视为文字字符串，而不是模板表达式的开头?发生问题在{{define"bob"}}上，我需要一个文字{{.

How do I get the template processor to treat {{ as a literal string instead of the start of a template expression? The problem occures at the {{define "bob"}} where I need a literal {{.

浏览器(chrome)控制台上的错误是:

The error on the browser (chrome) console is:

EXCEPTION: Template parse errors:
Parser Error: Unexpected token 'bob' at column 8 in [
        {{define "bob"}}This is the template bob{{end}}
        ] in BlueBox@2:49 ("
    <div class="blue-box">
        <div class="blue-box-title">{{boxTitle}}</div>[ERROR ->]
        {{define "bob"}}This is the template bob{{end}}
        <span>
            <ng-content></ng-content>
 "): BlueBox@2:49

推荐答案

使用 ngNonBindable

use ngNonBindable

示例:

<div ngNonBindable> {{ I'm inside curly bracket }} </div>

更新

以上内容在Anuglar 2中有效，现在在Angular 4中有一个名为

The above is valid in Anuglar 2, now in Angular 4 there is a class called DomSanitizer that can be used for inserting any kind of code inside of your HTML as a text.

您可以从micronyks的答案

这篇关于如何在Angular 2中显示文字{{的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！