2016-11-02 2 views
0

именно то, что предлагает название, - мой вопрос. Начну с объяснения того, что я должен делать.Угловая связь между компонентами

У меня есть компонентный виджет. Когда я нажимаю на него модальные попсы, содержащие пару элементов. Каждый элемент представляет собой другой раздел основного приложения. При щелчке по любому элементу будет отображаться конкретный раздел, связанный с этим элементом (который является самим компонентом).

У меня нет предварительного просмотра опыта с угловыми 1 или 2, так что, честно говоря, я понятия не имею, с чего начать или что я должен искать. Лучшее, что я получаю, это EventEmitter, Output, Input (но это для общения с родителями-родителями/родителями и детьми из того, что я прочитал, что не так). Также я смотрел Observable, но я не думаю, что это полезно в этой ситуации (для того, что я понимаю, я имею дело с вызовами на стороне сервера). Если у вас есть опыт, пожалуйста, поделитесь. Спасибо.

+2

https://angular.io/docs/ts/latest/cookbook/component-communication.html –

ответ

2

Код ниже демонстрирует связь между компонентами двойников, родителями и дочерними компонентами с помощью угловых услуг.

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 демонстрирует то же самое.

+1

Хотя эта ссылка может ответить на вопрос, лучше включить основные части ответа здесь и предоставить ссылку для Справка. Ответные ссылки могут стать недействительными, если связанная страница изменится. – thewaywewere

+0

@thewaywewere размещение кода здесь также, спасибо. –