[英]angular 2 share data between components
I am using Angular 2 rc1. 我正在使用Angular 2 rc1。 I have a component that shows a post and a component with slider-template.
我有一个显示帖子的组件和一个带有滑块模板的组件。 How do I pass data from the post component to the slider component
如何将数据从发布组件传递到滑块组件
PortfolioDetail.component.ts PortfolioDetail.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Router, RouteSegment } from '@angular/router';
import { PortfolioService } from './portfolio.service';
import { Helper } from '../../Services/helper.service';
import { SliderComponent } from './SliderComponent';
@Component({
'selector': 'portfolio',
'templateUrl': '/api/templates/PostComponent.portfoliodetail',
'providers': [PortfolioService, Helper],
'directives': [ROUTER_DIRECTIVES, SliderComponent],
'encapsulation': ViewEncapsulation.None,
'styleUrls': ['assets/css/post.css']
})
export class PortfolioDetailComponent implements OnInit {
public post;
public categories;
public active = 0;
constructor(
private _portfolioService: PortfolioService,
private _http: Http,
private _router: Router,
private _segment: RouteSegment,
public helper: Helper
) {
}
ngOnInit() {
let slug = this._segment.getParam('slug');
this._portfolioService.getPost(slug)
.subscribe(data => this.post = data);
this._portfolioService.getCategories()
.subscribe(data => this.categories = data);
}
setActive(i) {
this.active = i;
}
}
Slider Component 滑块组件
import { Component, ViewEncapsulation } from '@angular/core';
import {Http, HTTP_PROVIDERS} from '@angular/http';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { withType } from '../../Services/withType.pipe';
import { PortfolioService } from './portfolio.service';
@Component({
'selector': 'slider',
'templateUrl': '/api/templates/PostComponent.slider',
'pipes': [ withType ]
})
export class SliderComponent {
constructor() {
// How do I obtain "this.post" from PortfolioDetail Component
}
}
portfolio detail template 投资组合详细信息模板
<div class="container">
<article class="post-content" itemscope itemtype="http://schema.org/Article">
<header class="page-head">
<h1 itemprop="headline">@{{ post?.title }}</h1>
<h5 class="published" *ngIf="post != null"><i class="glyphicon glyphicon-time"></i> @{{ helper.dateObject(post?.published_at) | date }}</h5>
<ul>
<li *ngFor="let categorie of post?.categories">
<a [routerLink]="['/blog/categorie/', categorie.slug]">@{{ categorie.name }}</a>
</li>
</ul>
</header>
<div class="body" itemprop="articleBody">
<div class="row">
<div class="col-xs-12 col-md-6" *ngIf="post != null">
<slider></slider> <!-- the slider selector -->
</div>
<div class="body col-xs-12 col-md-6 sticky-content" [innerHTML]="post?.content">
</div>
</div>
</div>
</article>
</div>
slider template 滑块模板
<div class="gallery" *ngIf="(post.images | withType:'gallery').length > 0">
<ul class="gallery-items clearfix">
<li *ngFor="let image of (post.images | withType:'gallery'); let current = index" [ngClass]="{active:(current == active)}">
<img alt="@{{ image.alt }}" src="media/640/@{{ image.file }}" width="640" />
</li>
</ul>
<ol class="gallery-nav" *ngIf="(post.images | withType:'gallery').length > 1">
` <li *ngFor="let image of (post.images | withType:'gallery'); let i = index" [ngClass]="{active:(i == active)}" (click)="setActive(i)">
<img alt="@{{ image.alt }}" src="media/250/@{{ image.file }}" width="100" />
</li>
</ol>
</div>
To pass data from a component to components in its template you can use data-binding. 要将数据从组件传递到其模板中的组件,可以使用数据绑定。 The receiving component needs an input like:
接收组件需要输入,例如:
@Component({
'selector': 'slider',
'templateUrl': '/api/templates/PostComponent.slider',
'pipes': [ withType ]
})
export class SliderComponent {
@Input() post;
ngOnInit() {
console.log(this.post);
}
}
In the template of the parent component (portfolio) post
can be bound to the post
input of slider like: 在父组件(投资组合)的模板中,
post
可以绑定到滑块的post
输入,例如:
<slider [post]="post"></slider> <!-- the slider selector -->
Most of the time, we use a shared service for this. 大多数情况下,我们为此使用共享服务。 This service allows you to share data.
该服务允许您共享数据。
export class SharedService {
currentPost:any;
}
You can specify the corresponding provider when bootstrapping your application: 您可以在引导应用程序时指定相应的提供程序:
bootstrap(AppComponent, [ SharedService ]);
See this link for more details: 有关更多详细信息,请参见此链接:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.