我如何将数据从Django模板传递到Angle 4？

Question

I am having angular 4 application integrated with django. Angular 4 is just for showing some data in django template and i am having some RESTful api in django.I have used webpack to compile .ts files to js and included in django templates.I am getting the angular content in django templates and it works fine.

I am having angular component code

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();
}

And django template

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

I am getting the angular templates when i am using the static url (ie exact url) in angular component.

But i need to pass the {{test.id}} (which is from django views) value to angular component and use this id in url to get json,because its dynamic url not static.How can i do that any ideas??

Answer 1

In angular component file you can make the method as public and use it in the js file or inside script tag in html to pass the data or value.Call the function after the compiled js bundle is loaded.

Angular component code

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

And django template

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