Share API Данные с дочерним компонентом

Question

Я извлекаю данные из api, используя сервис в угловом 2 RC1 .. он втягивается в мой основной компонент, но я хотел бы также поделиться этими данными с другими компонентами, которые являются дочерними элементами основного шаблон. Я сделал попытку с входами, но я думаю, что использовал их неправильно, поэтому, надеюсь, кто-то может направить меня в правильном направлении здесь. В настоящий момент я звоню в api как в основном, так и в дочернем компоненте

--- Главный компонент

  import {Component} from '@angular/core'; 
      import {ProjectsMainApi} from "../../../services/projects-main"; 
      import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 
      import {ProjectMetaInfoComponent} from "./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 Компонент

  import {Component} from '@angular/core'; 
      import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; 
      import {ProjectsMainApi} from "../../../services/projects-main"; 
      import { RuntimeCompiler} from '@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); 
         } 
        ) 
       } 
      } 

Answer 1

Вы можете передавать данные от родителя к ребенку с помощью input

<child-component [input]="api_result_variable"></child-component> 

В директиве ребенка вы можете использовать @Input, чтобы получить данные

Answer 2

Если служба апи является Угловой 2 службой, вы может зарегистрировать его с помощью Углового инжектора, используя свойство поставщика. Если вы зарегистрируете его в родителе, данные доступны у родителя и всех дочерних элементов. См. Пример здесь: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html