Angular 2 Sibling Component Communication

ฉันมี ListComponent เมื่อมีการคลิกรายการใน ListComponent รายละเอียดของรายการนั้นควรจะแสดงใน DetailComponent ทั้งสองอย่างอยู่บนหน้าจอในเวลาเดียวกันดังนั้นจึงไม่มีการกำหนดเส้นทางที่เกี่ยวข้อง

ฉันจะบอก DetailComponent ได้อย่างไรว่ารายการใดใน ListComponent ถูกคลิก

ฉันได้พิจารณาการปล่อยเหตุการณ์ไปยังผู้ปกครอง (AppComponent) และให้ผู้ปกครองตั้งค่า selectedItem.id บน DetailComponent ด้วย @Input หรือฉันสามารถใช้บริการร่วมกับการสมัครสมาชิกที่สังเกตได้

แก้ไข:การตั้งค่ารายการที่เลือกผ่านเหตุการณ์ + @Input ไม่ได้ทริกเกอร์ DetailComponent แต่ในกรณีที่ฉันต้องรันโค้ดเพิ่มเติม ฉันไม่แน่ใจว่านี่เป็นวิธีแก้ปัญหาที่ยอมรับได้

แต่ทั้งสองวิธีนี้ดูซับซ้อนกว่าวิธี Angular 1 ในการทำสิ่งต่างๆซึ่งไม่ว่าจะผ่าน $ rootScope $ broadcast หรือ $ scope $ parent. $ broadcast

เนื่องจากทุกอย่างใน Angular 2 เป็นส่วนประกอบฉันรู้สึกประหลาดใจที่ไม่มีข้อมูลเพิ่มเติมเกี่ยวกับการสื่อสารของคอมโพเนนต์

มีวิธีอื่น / ตรงไปตรงมากว่านี้ในการทำให้สำเร็จหรือไม่?

อัปเดตเป็น rc.4: เมื่อพยายามรับข้อมูลที่ส่งผ่านระหว่างส่วนประกอบพี่น้องในเชิงมุม 2 วิธีที่ง่ายที่สุดในตอนนี้ (angular.rc.4) คือการใช้ประโยชน์จากการฉีดขึ้นรูปแบบลำดับชั้นของ angular2 และสร้างบริการที่ใช้ร่วมกัน

นี่คือบริการ:

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

@Injectable()
export class SharedService {
    dataArray: string[] = [];

    insertData(data: string){
        this.dataArray.unshift(data);
    }
}

ต่อไปนี้จะเป็นองค์ประกอบของผู้ปกครอง

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';
@Component({
    selector: 'parent-component',
    template: `
        <h1>Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>
    `,
    providers: [SharedService],
    directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent{

} 

และลูกสองคน

เด็ก 1

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-component',
    template: `
        <h1>I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>
    `
})
export class ChildComponent implements OnInit{
    data: string[] = [];
    constructor(
        private _sharedService: SharedService) { }
    ngOnInit():any {
        this.data = this._sharedService.dataArray;
    }
}

เด็ก 2 (เป็นพี่น้องกัน)

import {Component} from 'angular2/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-sibling-component',
    template: `
        <h1>I am a child</h1>
        <input type="text" [(ngModel)]="data"/>
        <button (click)="addData()"></button>
    `
})
export class ChildSiblingComponent{
    data: string = 'Testing data';
    constructor(
        private _sharedService: SharedService){}
    addData(){
        this._sharedService.insertData(this.data);
        this.data = '';
    }
}

ตอนนี้: สิ่งที่ควรทราบเมื่อใช้วิธีนี้

1. รวมเฉพาะผู้ให้บริการสำหรับบริการที่ใช้ร่วมกันในองค์ประกอบ PARENT ไม่ใช่เด็ก ๆ
2. คุณยังต้องรวมช่างก่อสร้างและนำเข้าบริการในเด็ก
3. คำตอบนี้เดิมได้รับคำตอบสำหรับเวอร์ชันเบต้า 2 เชิงมุมในช่วงต้น สิ่งที่เปลี่ยนแปลงไปทั้งหมดคือคำสั่งนำเข้าดังนั้นนั่นคือทั้งหมดที่คุณต้องอัปเดตหากคุณใช้เวอร์ชันดั้งเดิมโดยบังเอิญ

ในกรณีที่มีส่วนประกอบที่แตกต่างกัน 2 รายการ (ไม่ใช่ส่วนประกอบที่ซ้อนกัน parent \ child \ หลาน) ฉันขอแนะนำให้คุณทำดังนี้

MissionService:

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

@Injectable()

export class MissionService {
  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }
  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }

}

AstronautComponent:

import { Component, Input, OnDestroy } from '@angular/core';
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';
@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;
  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }
  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }
  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

ที่มา: ผู้ปกครองและเด็กสื่อสารผ่านบริการ

วิธีหนึ่งที่จะทำเช่นนี้คือการใช้บริการที่ใช้ร่วมกัน

อย่างไรก็ตามฉันพบว่าวิธีแก้ปัญหาต่อไปนี้ง่ายกว่ามากมันอนุญาตให้แชร์ข้อมูลระหว่างพี่น้อง 2 คน (ฉันทดสอบสิ่งนี้กับAngular 5เท่านั้น)

ในเทมเพลตองค์ประกอบหลักของคุณ:

<!-- Assigns "AppSibling1Component" instance to variable "data" -->
<app-sibling1 #data></app-sibling1>
<!-- Passes the variable "data" to AppSibling2Component instance -->
<app-sibling2 [data]="data"></app-sibling2> 

แอปพลิเค sibling2.component.ts

import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';
...

export class AppSibling2Component {
   ...
   @Input() data: AppSibling1Component;
   ...
}

มีการอภิปรายเกี่ยวกับเรื่องนี้ที่นี่

https://github.com/angular/angular.io/issues/2663

คำตอบของ Alex J นั้นดี แต่ใช้ไม่ได้กับ Angular 4 ปัจจุบันอีกต่อไป ณ เดือนกรกฎาคม 2017

และลิงค์นี้จะแสดงให้เห็นถึงวิธีการสื่อสารระหว่างพี่น้องโดยใช้บริการที่ใช้ร่วมกันและสามารถสังเกตได้

https://embed.plnkr.co/P8xCEwSKgcOg07pwDrlO/

คำสั่งสามารถทำให้เข้าใจได้ในบางสถานการณ์ในการ "เชื่อมต่อ" ส่วนประกอบ ในความเป็นจริงสิ่งที่เชื่อมต่อไม่จำเป็นต้องเป็นส่วนประกอบทั้งหมดและบางครั้งก็มีน้ำหนักเบากว่าและง่ายกว่าจริง ๆ หากไม่เป็นเช่นนั้น

ตัวอย่างเช่นฉันมีYoutube Playerคอมโพเนนต์ (การตัด Youtube API) และฉันต้องการปุ่มควบคุมสำหรับมัน เหตุผลเดียวที่ปุ่มไม่ได้เป็นส่วนหนึ่งขององค์ประกอบหลักของฉันคือปุ่มเหล่านี้อยู่ที่อื่นใน DOM

ในกรณีนี้มันเป็นเพียงส่วนประกอบ 'ส่วนขยาย' ที่จะใช้ได้กับคอมโพเนนต์ "พาเรนต์" เท่านั้น ฉันพูดว่า 'ผู้ปกครอง' แต่ใน DOM นั้นเป็นพี่น้องกัน - ดังนั้นจงเรียกมันว่าสิ่งที่คุณต้องการ

อย่างที่ฉันบอกว่ามันไม่จำเป็นต้องเป็นส่วนประกอบทั้งหมดในกรณีของฉันมันเป็นแค่<button>ส่วนประกอบ (แต่อาจเป็นส่วนประกอบก็ได้)

@Directive({
    selector: '[ytPlayerPlayButton]'
})
export class YoutubePlayerPlayButtonDirective {

    _player: YoutubePlayerComponent; 

    @Input('ytPlayerVideo')
    private set player(value: YoutubePlayerComponent) {
       this._player = value;    
    }

    @HostListener('click') click() {
        this._player.play();
    }

   constructor(private elementRef: ElementRef) {
       // the button itself
   }
}

ใน HTML สำหรับProductPage.componentที่youtube-playerเห็นได้ชัดคือองค์ประกอบของฉันที่ห่อ Youtube API

<youtube-player #technologyVideo videoId='NuU74nesR5A'></youtube-player>

... lots more DOM ...

<button class="play-button"        
        ytPlayerPlayButton
        [ytPlayerVideo]="technologyVideo">Play</button>

คำสั่งเชื่อมโยงทุกอย่างให้ฉันและฉันไม่จำเป็นต้องประกาศเหตุการณ์ (คลิก) ใน HTML

ดังนั้นคำสั่งสามารถเชื่อมต่อกับเครื่องเล่นวิดีโอได้อย่างดีโดยไม่ต้องเกี่ยวข้องกับการProductPageเป็นคนกลาง

นี่เป็นครั้งแรกที่ฉันได้ทำสิ่งนี้จริง ๆ จึงยังไม่แน่ใจว่าจะปรับขนาดได้อย่างไรสำหรับสถานการณ์ที่ซับซ้อนกว่านี้ สำหรับสิ่งนี้แม้ว่าฉันจะมีความสุขและทำให้ HTML ของฉันเรียบง่ายและมีความรับผิดชอบในทุกสิ่งที่แตกต่างกัน

นี่คือคำอธิบายที่ใช้ได้จริง: อธิบายง่ายๆที่นี่

ใน call.service.ts

import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CallService {
 private subject = new Subject<any>();

 sendClickCall(message: string) {
    this.subject.next({ text: message });
 }

 getClickCall(): Observable<any> {
    return this.subject.asObservable();
 }
}

คอมโพเนนต์จากตำแหน่งที่คุณต้องการโทรสังเกตได้เพื่อแจ้งส่วนประกอบอื่นที่คลิกปุ่ม

import { CallService } from "../../../services/call.service";

export class MarketplaceComponent implements OnInit, OnDestroy {
  constructor(public Util: CallService) {

  }

  buttonClickedToCallObservable() {
   this.Util.sendClickCall('Sending message to another comp that button is clicked');
  }
}

ส่วนประกอบที่คุณต้องการดำเนินการกับปุ่มที่คลิกบนส่วนประกอบอื่น

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";


ngOnInit() {

 this.subscription = this.Util.getClickCall().subscribe(message => {

 this.message = message;

 console.log('---button clicked at another component---');

 //call you action which need to execute in this component on button clicked

 });

}

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";


ngOnInit() {

 this.subscription = this.Util.getClickCall().subscribe(message => {

 this.message = message;

 console.log('---button clicked at another component---');

 //call you action which need to execute in this component on button clicked

});

}

ความเข้าใจของฉันชัดเจนในการสื่อสารส่วนประกอบโดยอ่านสิ่งนี้: http://musttoknow.com/angular-4-angular-5-communicate-two-components-using-observable-subject/

บริการที่ใช้ร่วมกันเป็นทางออกที่ดีสำหรับปัญหานี้ หากคุณต้องการจัดเก็บข้อมูลกิจกรรมบางอย่างด้วยคุณสามารถเพิ่ม Shared Service ในรายชื่อผู้ให้บริการโมดูลหลัก (app.module) ได้

@NgModule({
    imports: [
        ...
    ],
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        SharedService,
        ...
    ]
});

จากนั้นคุณสามารถจัดหาให้กับส่วนประกอบของคุณได้โดยตรง

constructor(private sharedService: SharedService)

ด้วยบริการที่ใช้ร่วมกันคุณสามารถใช้ฟังก์ชันหรือคุณสามารถสร้างเรื่องเพื่ออัปเดตสถานที่หลายแห่งพร้อมกัน

@Injectable()
export class FolderTagService {
    public clickedItemInformation: Subject<string> = new Subject(); 
}

ในองค์ประกอบรายการของคุณคุณสามารถเผยแพร่ข้อมูลรายการที่คลิกได้

this.sharedService.clikedItemInformation.next("something");

จากนั้นคุณสามารถดึงข้อมูลนี้ได้ที่ส่วนประกอบรายละเอียดของคุณ:

this.sharedService.clikedItemInformation.subscribe((information) => {
    // do something
});

เห็นได้ชัดว่าข้อมูลที่รายการส่วนประกอบแชร์อาจเป็นอะไรก็ได้ หวังว่านี่จะช่วยได้

คุณต้องตั้งค่าความสัมพันธ์แม่ลูกระหว่างส่วนประกอบของคุณ ปัญหาคือคุณอาจฉีดส่วนประกอบลูกในตัวสร้างขององค์ประกอบหลักและเก็บไว้ในตัวแปรท้องถิ่น แต่คุณควรประกาศคอมโพเนนต์ลูกในองค์ประกอบหลักของคุณโดยใช้ตัว@ViewChildประกาศคุณสมบัติ นี่คือลักษณะขององค์ประกอบหลักของคุณ:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ListComponent } from './list.component';
import { DetailComponent } from './detail.component';

@Component({
  selector: 'app-component',
  template: '<list-component></list-component><detail-component></detail-component>',
  directives: [ListComponent, DetailComponent]
})
class AppComponent implements AfterViewInit {
  @ViewChild(ListComponent) listComponent:ListComponent;
  @ViewChild(DetailComponent) detailComponent: DetailComponent;

  ngAfterViewInit() {
    // afther this point the children are set, so you can use them
    this.detailComponent.doSomething();
  }
}

https://angular.io/docs/ts/latest/api/core/index/ViewChild-var.html

https://angular.io/docs/ts/latest/cookbook/component-communication.html#parent-to-view-child

ระวังคอมโพเนนต์ลูกจะไม่พร้อมใช้งานในตัวสร้างขององค์ประกอบหลักหลังจากที่ngAfterViewInitเรียกอายุการใช้งานเบ็ด จะจับตะขอนี้ง่ายใช้อินเตอร์เฟซในตัวคุณผู้ปกครองชั้นเรียนเดียวกับที่คุณจะทำอะไรกับAfterViewInitOnInit

แต่มีผู้ประกาศทรัพย์สินอื่น ๆ ตามที่อธิบายไว้ในบันทึกของบล็อกนี้: http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/

วิชาพฤติกรรม. ฉันเขียนบล็อกเกี่ยวกับเรื่องนั้น

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
private noId = new BehaviorSubject<number>(0); 
  defaultId = this.noId.asObservable();

newId(urlId) {
 this.noId.next(urlId); 
 }

ในตัวอย่างนี้ฉันกำลังประกาศพฤติกรรม noid เรื่องของ type number นอกจากนี้ยังเป็นที่สังเกตได้ และถ้า "มีบางอย่างเกิดขึ้น" สิ่งนี้จะเปลี่ยนไปด้วยฟังก์ชัน new () {}

ดังนั้นในส่วนประกอบของพี่น้องจะเรียกใช้ฟังก์ชันเพื่อทำการเปลี่ยนแปลงและอีกส่วนหนึ่งจะได้รับผลกระทบจากการเปลี่ยนแปลงนั้นหรือในทางกลับกัน

ตัวอย่างเช่นฉันได้รับรหัสจาก URL และอัปเดต noid จากเรื่องพฤติกรรม

public getId () {
  const id = +this.route.snapshot.paramMap.get('id'); 
  return id; 
}

ngOnInit(): void { 
 const id = +this.getId ();
 this.taskService.newId(id) 
}

และจากอีกด้านหนึ่งฉันสามารถถามได้ว่า ID นั้นคือ "สิ่งที่ฉันต้องการ" หรือไม่และเลือกหลังจากนั้นในกรณีของฉันถ้าฉันต้องการกำหนดงานและงานนั้นเป็น url ปัจจุบันก็ต้องเปลี่ยนเส้นทางฉัน ถึงบ้าน:

delete(task: Task): void { 
  //we save the id , cuz after the delete function, we  gonna lose it 
  const oldId = task.id; 
  this.taskService.deleteTask(task) 
      .subscribe(task => { //we call the defaultId function from task.service.
        this.taskService.defaultId //here we are subscribed to the urlId, which give us the id from the view task 
                 .subscribe(urlId => {
            this.urlId = urlId ;
                  if (oldId == urlId ) { 
                // Location.call('/home'); 
                this.router.navigate(['/home']); 
              } 
          }) 
    }) 
}

นี่ไม่ใช่สิ่งที่คุณต้องการ แต่แน่นอนว่าจะช่วยคุณได้

ฉันแปลกใจที่ไม่มีข้อมูลเพิ่มเติมเกี่ยวกับการสื่อสารคอมโพเนนต์ <=> ลองดู บทช่วยสอนนี้โดย angualr2

sharedServiceสำหรับพี่น้องสื่อสารส่วนประกอบผมขอแนะนำให้ไปด้วย นอกจากนี้ยังมีตัวเลือกอื่น ๆ

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {NameService} from 'src/nameService';


import {TheContent} from 'src/content';
import {Navbar} from 'src/nav';


@Component({
  selector: 'app',
  directives: [TheContent,Navbar],
  providers: [NameService],
  template: '<navbar></navbar><thecontent></thecontent>'
})


export class App {
  constructor() {
    console.log('App started');
  }
}

bootstrap(App,[]);

โปรดดูลิงก์ที่ด้านบนสำหรับรหัสเพิ่มเติม

แก้ไข:นี่เป็นการสาธิตขนาดเล็กมาก คุณได้พูดถึงว่าคุณได้ลองใช้sharedServiceแล้ว ดังนั้นโปรดพิจารณาบทช่วยสอนนี้โดย angualr2สำหรับข้อมูลเพิ่มเติม

ฉันได้ส่งต่อเมธอด setter จากพาเรนต์ไปยังหนึ่งในลูกของมันผ่านการโยงโดยเรียกใช้เมธอดนั้นด้วยข้อมูลจากคอมโพเนนต์ลูกซึ่งหมายความว่าคอมโพเนนต์พาเรนต์ได้รับการอัปเดตและสามารถอัปเดตคอมโพเนนต์ลูกที่สองด้วยข้อมูลใหม่ได้ มันต้องการการผูก 'this' หรือใช้ฟังก์ชันลูกศรแม้ว่า

สิ่งนี้มีประโยชน์ที่เด็ก ๆ ไม่ได้อยู่ด้วยกันเพราะพวกเขาไม่ต้องการบริการที่ใช้ร่วมกันโดยเฉพาะ

ฉันไม่แน่ใจทั้งหมดว่านี่เป็นแนวทางปฏิบัติที่ดีที่สุดน่าจะเป็นเรื่องที่น่าสนใจหากได้ยินคนอื่นมองเรื่องนี้