javascript - 我如何将数据从 Django 模板传递到 Angular 4？

Question

我正在将 angular 4 应用程序与 django 集成。 Angular 4 仅用于在 django 模板中显示一些数据，我在 django 中有一些 RESTful api。我使用 webpack 将 .ts 文件编译为 js 并包含在 django 模板中。我在 django 模板中获取 Angular 内容并且它有效很好。

我有 Angular 组件代码

import { Component,OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({selector: 'my-component',
            template: '<ul>
                       <li *ngFor="let res in results">
                        {{res}}
                       </li></ul>'
})
export class MyComponent {
results: {};
constructor(private http: Http) {

}
app_func(){
    this.http.get('http://someurl/id/test.json').subscribe( res => {
        this.results = res.json();
    })
}
ngOnInit(): void {
this.app_func();
}

和django模板

{% block bundles %}
    {% render_bundle 'main' %}
{% endblock bundles %}

{% block breadcrumbs %}
{{ block.super }}
{% breadcrumb test.name 'detail' test.id %}
{% endblock breadcrumbs %}

{% block content %}
<div class="row">
   <div class="col-md-12 col-md-offset-0">
    <div class="test" id="results">
        <my-component>Loading...<my-component>
    </div>
   </div>
 </div>
{% endblock content %}

当我在 Angular 组件中使用静态 url(即确切的 url)时，我得到了 Angular 模板。

但我需要将 {{test.id}}(来自 django View )值传递给 Angular 组件，并在 url 中使用此 id 来获取 json，因为它的动态 url 不是静态的。我该怎么做想法??

Answer 1

在 Angular 组件文件中，您可以将该方法设为 public，并在 js 文件或 html 中的脚本标记内使用它来传递数据或值。在加载编译的 js 包后调用该函数。

Angular 组件代码

import { Component,OnInit,NgZone,OnDestroy } from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({selector: 'my-component',
        template: '<ul>
                   <li *ngFor="let res in results">
                    {{res}}
                   </li></ul>'
})
export class MyComponent {
results: {};
constructor(private http: Http,private zone:NgZone) {}
app_func(test_id){
this.zone.run(() =>
    this.http.get('http://someurl/'+test_id+'/test.json').subscribe( res => 
    {
        this.results = res.json();
    })
);
}
ngOnInit(): void {
(<any>window).app_func = this.app_func.bind(this);
}
ngOnDestroy() {
(<any>window).app_func = null;
}

和django模板

{% block bundles %}
{% render_bundle 'main' %}
{% endblock bundles %}

{% block breadcrumbs %}
{{ block.super }}
{% breadcrumb test.name 'detail' test.id %}
{% endblock breadcrumbs %}

{% block scripts %}
<script>
app_func(test_id='{{test.id}}');
</script>
{% endblock scripts %}

{% block content %}
<div class="row">
<div class="col-md-12 col-md-offset-0">
<div class="test" id="results">
    <my-component>Loading...<my-component>
</div>
</div>
</div>
{% endblock content %}