Question

我使用角度2 RC1中的服务从api中提取数据..它被拉入我的主要组件但我想与其他组件共享这些数据，这些组件是主模板的子项。我已经制作了尝试输入，但我认为我正在使用它们错误所以希望有人可以在这里引导我正确的方向..目前我正在主要和子组件中调用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);
                        }
                    )
                }
            }

- 子组件

            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

将数据从Parent发送给孩子

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

在child指令中，您可以使用@Input来获取数据

Answer 2

如果api服务是Angular 2服务，您可以使用提供程序属性将其注册到Angular注入器。如果在父项中注册，则父项和所有子项中都有数据。请参阅此处的示例：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

与子组件共享API数据

2 个答案: