首页 文章

Angular 2 @Input：是否可以将数据从组件传递到另一个子路由组件？

提问于
浏览 次
9

基于Angular 2的docs，您可以使用@Input轻松地将数据从组件传递到另一个组件 .

例如，我可以像这样设置父级：

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" 传递给父组件的模板（当然在子选择器中）并将它们处理到子组件中 .

But here's the issue.

我的子组件DOM元素（在本例中为 <hero-child> ）在父模板中不可用，而是在 <router-outlet> 元素中加载 .

那么如何将数据传递给子路径组件呢？是不是输入正确的方法？我想避免使用double，treble等调用来获取我父路由/组件中已有的相同数据 .

angular typescript angular2-routing angular2-template

3 回答

  • 3

    我不相信有任何方法可以将对象作为输入传递给路由到的组件 . 我已经通过使用具有observable的服务来完成此操作，以在父组件和一个或多个子组件之间共享数据 .

    基本上，父组件调用服务并将所需的任何数据推送到它 . 在我的情况下，它只是一个ID，但它可以是任何东西 . 然后，服务可以对该数据执行某些操作（或不执行） . 在我的示例中，我正在调用服务器以根据ID获取公司，但如果您已经拥有所需的对象，则不需要这样做 . 然后，它将对象推送到子组件中订阅的Observable流 .

    父组件：

    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();
    }
}
    回复于
  • 0

    考虑为 @Input() 或 @Output() 创建一个Angular2服务，该服务将通过多个层或不相关的组件 .

    回复于
  • 0

    你可以通过以下方式实现目标：

    • 创建一个为您保留某些状态的服务 . 因此子组件可以在以后访问它 .

    • 使用路由器传递数据（动态路由，queryParam，param） . 例如：users /：id => users / 23

    • 使用状态管理库传递数据 . 例如：Redux

    回复于

相关问题