你如何显示文字{{在Angular 2中

Question

我在Angular2 rc 1中有一个模板,我需要在其中显示来自不同语言的一大块代码.那个语言有{{在其中.

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"}},我需要一个文字{{.

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

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

Answer 1

使用 ngNonBindable

例:

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

UPDATE

上面的内容在Anuglar 2中有效,现在在Angular 4中有一个叫做的类DomSanitizer,可以用来在HTML中插入任何类型的代码作为文本.

你可以从micronyks的答案中检查这个工作的plunker