Question

标题所暗示的是我的问题。我将从解释我必须做的事情开始。

所以我有一个组件小部件。当我点击它时，一个包含几个项目的模态弹出窗口。每个项目代表主应用程序中的不同部分。单击任何项目时，将显示与该项目相关的特定部分（这是一个组件本身）。

我没有角度1或2的预览经验所以说实话我不知道从哪里开始或者我应该搜索什么。我得到的最好的是EventEmitter，输出，输入（但是这些是用于从我读过的孩子 - 父/子 - 孩子的通信，但事实并非如此）。此外，我一直在寻找Observable，但我不认为这在这种情况下是有帮助的（因为我理解我处理服务器端服务调用）。如果您有任何经验，请分享。谢谢。

Answer 1

下面的代码演示了在角度服务的帮助下，兄弟组件，父组件和子组件之间的通信。

<强> app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './app.parent.component';
import { ChildComponent } from './child.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ ParentComponent, ChildComponent ],
    bootstrap: [ ParentComponent ]
})
export class AppModule {}

<强> app.parent.component.ts

import { Component } from '@angular/core';
import { ParentChildService } from './parent-child.service';

@Component({
    selector: 'parent-app',
    template: `
        <div>
            <div>
                <h1>Hello from Parent</h1>
            </div>
            <div style="border: 1px dotted blue;">
                <p> <b> Child message history </b> </p>
                <p *ngFor="let message of childMessages">
                    {{ message }}
                </p>
            </div>
            <child-app [id] = 1> </child-app>
            <child-app [id] = 2> </child-app>
        </div>
    `,
    providers: [ ParentChildService ]
})
export class ParentComponent {
    childMessages: string[] = [];

    constructor(private parentChildService: ParentChildService) {
        parentChildService.attentionRequested$.subscribe((request) => {
            this.childMessages.push(this.parentChildService.requestedBy + ": " + request);
        });
    }
}

<强> child.component.ts

import { Component, OnDestroy, Input } from '@angular/core';
import { ParentChildService } from './parent-child.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
    selector: 'child-app',
    template: `
        <div>
            <div>
                <h2>Hello from {{ id }} child component</h2>
                <span> Message: </span> <input type="text" [(ngModel)]="message">
                <button (click) = "requestAttention();"> Request </button>
            </div>
            <div style="border: 1px dotted green;">
                <p> <b> Sibling message history </b> </p>
                <p *ngFor="let message of siblingMessages">
                    {{ message }}
                </p>
            </div>
        </div>
    `
})
export class ChildComponent implements OnDestroy {
    message: string;
    subscription: Subscription;
    siblingMessages: string[] = [];
    @Input() id: number;

    requestAttention(): void {
        this.parentChildService.requestAttention(this.message, this.id);
    }

    constructor(private parentChildService: ParentChildService) {
        this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => {
            if (this.id != this.parentChildService.requestedBy) {
                this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request);
            }
        });
    }

    ngOnDestroy(): void {
        // prevent memory leak when component destroyed
        this.subscription.unsubscribe();
    }
}

<强>父 - child.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ParentChildService {
    // Observable sources
    private requestAttentionSource = new Subject<string>();

    // Observable streams
    attentionRequested$ = this.requestAttentionSource.asObservable();
    requestedBy: number;

    requestAttention(request: string, id: number) {
        this.requestedBy = id;
        this.requestAttentionSource.next(request);
    }
}

gist演示了同样的事情。

Answer 2

我使用单例来保持状态，并将其注入我需要读取状态/改变状态的任何地方。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Angular2组件到组件的通信

2 个答案: