Question

我正在使用与django集成的角度4应用程序。 Angular 4只是用于在django模板中显示一些数据，我在django中有一些RESTful api。我使用webpack将.ts文件编译为js并包含在django模板中。我在django模板中获取角度内容并且它可以工作细

我有角度组件代码

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 %}

当我在角度分量中使用静态URL（即精确url）时，我得到角度模板。

但我需要将{{test.id}}（来自django views）值传递给angular组件并在url中使用此id来获取json，因为它的动态url不是static.How我可以这样做吗想法？

Answer 1

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

角度组件代码

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 %}

如何将数据从django模板传递到angular 4？

1 个答案: