[英]angular 2 share data between components
我正在使用Angular 2 rc1。 我有一個顯示帖子的組件和一個帶有滑塊模板的組件。 如何將數據從發布組件傳遞到滑塊組件
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;
}
}
滑塊組件
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
}
}
投資組合詳細信息模板
<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>
滑塊模板
<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>
要將數據從組件傳遞到其模板中的組件,可以使用數據綁定。 接收組件需要輸入,例如:
@Component({
'selector': 'slider',
'templateUrl': '/api/templates/PostComponent.slider',
'pipes': [ withType ]
})
export class SliderComponent {
@Input() post;
ngOnInit() {
console.log(this.post);
}
}
在父組件(投資組合)的模板中, post
可以綁定到滑塊的post
輸入,例如:
<slider [post]="post"></slider> <!-- the slider selector -->
大多數情況下,我們為此使用共享服務。 該服務允許您共享數據。
export class SharedService {
currentPost:any;
}
您可以在引導應用程序時指定相應的提供程序:
bootstrap(AppComponent, [ SharedService ]);
有關更多詳細信息,請參見此鏈接:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.