angular - Share API Data with child Component -
i pulling data api using service in angular 2 rc1.. gets pulled main component share data other components children of main template.. have made attempt inputs think using them incorrectly can steer me right direction on here.. @ moment making call api in both main , child component
--- main component
import {component} '@angular/core'; import {projectsmainapi} "../../../services/projects-main"; import { routeconfig, routeparams, router_directives, router_providers } '@angular/router-deprecated'; import {projectmetainfocomponent} "./projectmetainfocomponent"; declare var jquery: any; interface projectresult { project: object } @component({ selector: 'projects', templateurl: './app/components/projects/details/project-single.html', directives: [router_directives, projectmetainfocomponent] }) export class projectdetailscomponent { project: object = {}; constructor(private _api: projectsmainapi, private _params: routeparams) { this._api.getsingleportfolio( _params.get("slug") ).then( (res: projectresult) => { this.project = res.project[0]; console.log(this.project); }, (error) => { console.error(error); } ) } } --child component
import {component} '@angular/core'; import { routeconfig, routeparams, router_directives, router_providers } '@angular/router-deprecated'; import {projectsmainapi} "../../../services/projects-main"; import { runtimecompiler} '@angular/compiler/src/runtime_compiler'; interface projectresult { project: object } @component({ selector: 'project-meta', template: ` <section class="sector intro-pad margin-temp" id="projects-header"> <div class="row"> <div class="portfolio-wrap hentry rh-blue-bg white-fg"> <div class="breadcrumb"> <ul class="list-reset"> <li> <div id="main-breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:breadcrumb"><a rel="v:url" property="v:title" href="/">home</a></span> | <span typeof="v:breadcrumb"><a rel="v:url" property="v:title" href="/#/project">projects</a></span> | <span class="current" *ngif="title">{{ title }}</span> </div> </li> </ul> </div> <div class="portfolio-introduction-block"> <h1 class="project-header" *ngif="title">{{ title }}</h1> <div class="pinfo"> <h2 class="proj-heading rh-blue-lite-fg"><span>intro...</span></h2> <p *ngif="title">{{ title }}</p> </div> <ul class="list-reset project-meta"> <li class="title rh-blue-lite-fg" *ngif="headerone">{{ headerone }}</li> <li class="metainfos grey-fg" *ngif="infoone">{{ infoone }}</li> <li class="title rh-blue-lite-fg" *ngif="headertwo">{{ headertwo }}</li> <li class="metainfos grey-fg" *ngif="infotwo">{{ infotwo }}</li> <li class="title rh-blue-lite-fg" *ngif="headerthree">{{ headerthree }}</li> <li class="metainfos grey-fg" *ngif="infothree">{{ infothree }}</li> <li class="title rh-blue-lite-fg" *ngif="headerfour">{{ headerfour }}</li> <li class="metainfos grey-fg" *ngif="infofour">{{ infofour }}</li> <li class="title rh-blue-lite-fg" *ngif="headerfive">{{ headerfive }}</li> <li class="metainfos grey-fg" *ngif="infofive">{{ infofive }}</li> <li class="title rh-blue-lite-fg" *ngif="headersix">{{ headersix }}</li> <li class="metainfos grey-fg" *ngif="infosix">{{ infosix }}</li> <li class="metainfos">visit</li> </ul> </div> </div> </div> </section> ` }) export class projectmetainfocomponent { title: object = {}; headerone: object = {}; headertwo: object = {}; headerthree: object = {}; headerfour: object = {}; headerfive: object = {}; headersix: object = {}; infoone: object = {}; infotwo: object = {}; infothree: object = {}; infofour: object = {}; infofive: object = {}; infosix: object = {}; constructor(private _api: projectsmainapi, private _params: routeparams, private _runtimecompiler: runtimecompiler) { this._runtimecompiler.clearcache(); this._api.getsingleportfolio(_params.get("slug")).then( (res: projectresult) => { this.title = res.project[0].title; this.headerone = res.project[0].meta_header_one; this.headertwo = res.project[0].meta_header_two; this.headerthree = res.project[0].meta_header_three; this.headerfour = res.project[0].meta_header_four; this.headerfive = res.project[0].meta_header_five; this.headersix = res.project[0].meta_header_six; this.infoone = res.project[0].meta_info_one; this.infotwo = res.project[0].meta_info_two; this.infothree = res.project[0].meta_info_three; this.infofour = res.project[0].meta_info_four; this.infofive = res.project[0].meta_info_five; this.infosix = res.project[0].meta_info_six; }, (error) => { console.error(error); } ) } }
you can send data parent child using input
<child-component [input]="api_result_variable"></child-component> in child directive can use @input data
Comments
Post a Comment