【发布时间】：2016-05-28 16:01:06
【问题描述】：
我正在使用 Angular 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);
}
)
}
}
【问题讨论】：
标签： angular angular2-template angular2-directives angular2-services