如何在 Angular 2 模板中使用 Django 模板？ [复制]答案

【问题标题】：How to use Django templating inside Angular 2 template? [duplicate]如何在 Angular 2 模板中使用 Django 模板？ [复制]
【发布时间】：2016-09-07 20:54:18
【问题描述】：

我正在尝试遍历视图呈现给 HTML 页面的 django 对象。我以下列方式定义了一个 Angular 2 组件：-

@Component({

selector: 'search',
template:`

            <form [ngFormModel]="form" >
                  {% for category in categories_all %}
                  <li>
                    <div class="checkbox">
                      <label>
                        <input type="radio" name="category" 
                        id="category_{{category.id}}" 
                        value="{{category.name}}"
                        ngControl = "category"
                        #category="ngForm"
                        {% ifequal category.id|stringformat:"s"
                        param_values.category_id|stringformat:"s" %}
                         checked="checked"
                         {% endifequal %}
                         (click)="onClick()">
                 {{category.name}}
                      </label>
                    </div>
                  </li>{% endfor %}
            </form>
`,
providers:[ HTTP_PROVIDERS]


})

{% for category in categories_all %} 是 django 模板语法，因此 angular2 无法识别它。有没有办法解决这个问题？

【问题讨论】：

您应该使用ngServices 调用categories 并将数据存储在ngModel 中的数组中。
即使我也想过这样做，但我如何获得类别对象？没有明确的 api 调用。呈现页面时，我将其作为上下文传递。
使用你的 Django 模板定义一个 javascript var，然后！

标签： python django typescript angular

【解决方案1】：

你应该像这样定义自己的模板标签

AngularJS 模块 (app.js)

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

网页

<a>[[ variable ]]</a>

【讨论】：

【解决方案2】：

使用{% verbatim %} Django 模板标签并将您的AngularJS 模板代码放在{% verbatim %} 和{% endverbatim %} 之间。

【讨论】：

如果我想在 Django 模板中显示有角度的东西，这很有效。我要实现的恰恰相反。
你想在浏览器中使用 Angular 2 生成 Django 模板并发送给服务器解析吗？
是的。就像我在上面的代码 sn-p 中显示的那样。

【解决方案3】：

您可以同时使用 django 和 angular2 模板而不会发生任何冲突。

如果您使用的是Jinja2，那么您可以轻松更改Jinja2 选项中的变量起始字符串。

更多详情请咨询我的blog post。

【讨论】：