角2@输入:可以将数据从一个组件传递到另一个子路由组件吗？
角2@输入:可以将数据从一个组件传递到另一个子路由组件吗？
提问于 2016-08-31 14:52:28
基于角2的docs，您可以很容易地通过@输入将数据从一个组件传递到另一个组件。
因此，例如，我可以这样设置父级：
import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
selector: 'hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</hero-child>
`
})
export class HeroParentComponent {
heroes = HEROES;
master: string = 'Master';
}获取子组件中的数据，如下所示：
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}所以很明显，将[hero]="data"传递给父组件的模板(当然是在子选择器中)并将它们处理到子组件中。
，但问题是这样的。
我的子组件DOM元素(在本例中是<hero-child>)在父模板中不可用，而是加载在<router-outlet>元素中。
然后如何将数据传递给子路由组件？输入的方式不对吗？我希望避免双、三重等调用，以获得与我的父路由/组件中已经有相同的数据。
回答 3
Stack Overflow用户
发布于 2016-12-14 02:21:00
我不相信有任何方法可以将对象作为输入传递到被路由到的组件。我通过使用一个可以观察到的服务在父组件和一个或多个子组件之间共享数据来实现这一点。
基本上，父组件调用服务并将它需要的任何数据推送给它。在我的例子中，它只是一个ID，但它可能是任何东西。然后，服务可以对该数据(或不使用)做一些事情。在我的示例中，我打电话给服务器，以便根据ID获得一个公司，但是如果您已经拥有了需要的对象，则不需要这样做。然后，它将一个对象推入一个可观察的流中，该流在子组件中订阅。
父组件：
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { SalesProcessService } from './salesProcess.service';
import { Subscription } from 'rxjs/Rx';
@Component({
selector: 'ex-sales-process',
template: `
<router-outlet></router-outlet>
`
})
export class SalesProcessComponent implements OnInit, OnDestroy {
private companyRowId: string;
private paramsSubscription: Subscription;
constructor(
private salesProcessService: SalesProcessService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
if (this.companyRowId !== params['companyId']) {
this.companyRowId = params['companyId'];
this.salesProcessService.getCompany(this.companyRowId);
}
});
}
ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
}服务：
import { Injectable } from '@angular/core';
import { CompanyDataService } from '../common/services/data';
import { ReplaySubject } from 'rxjs';
import { Observable, Subject, Subscription } from 'rxjs/Rx';
@Injectable()
export class SalesProcessService {
private companyLoadedSource = new ReplaySubject<any>(1);
/* tslint:disable:member-ordering */
companyLoaded$ = this.companyLoadedSource.asObservable();
/* tslint:enable:member-ordering */
constructor (
private companyDataService: CompanyDataService) { }
getCompany(companyRowId: string) {
// Data service that makes http call and returns Observable
this.companyDataService.getCompany(companyRowId).subscribe(company => this.companyLoadedSource.next(company));
}
}子组件
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SalesProcessService } from '../salesProcess.service';
import { Subscription } from 'rxjs/Rx';
@Component({
selector: 'ex-company',
template: require('./company.component.html'),
styles: [require('./company.component.css')]
})
export class CompanyComponent implements OnInit, OnDestroy {
company: any;
private companySub: Subscription;
constructor(
private salesProcessService: SalesProcessService
) { }
ngOnInit() {
this.companySub = this.salesProcessService.companyLoaded$.subscribe(company => {
this.company = company;
});
}
ngOnDestroy() {
this.companySub.unsubscribe();
}
}Stack Overflow用户
发布于 2016-12-09 21:00:10
考虑为@Input()或@Output()创建一个将被传递到多个层或一个不相关组件的@Output()服务。
Stack Overflow用户
发布于 2016-12-19 23:49:09
你可以通过以下方式实现你想要的：
- 创建一个为您保存某种状态的服务。这样，子组件可以稍后访问它。
- 使用路由器传递数据(动态路由、queryParam、param)。用户/:id => users/23
- 使用状态管理库传递数据。例: Redux
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39252883
复制相关文章
相似问题
腾讯云开发者
