我有一个ListComponent。在ListComponent中单击某个项目时,该项目的详细信息应显示在DetailComponent中。两者都同时显示在屏幕上,因此没有路由。

我如何告诉DetailComponent单击ListComponent中的哪个项目?

我考虑过发出一个事件直到父对象(AppComponent),并让父对象使用@Input在DetailComponent上设置selectedItem.id。或者我可以使用具有可观察的订阅的共享服务。


编辑:通过事件+ @Input设置选定的项目不会触发DetailComponent,但是如果我需要执行其他代码。因此,我不确定这是否是可以接受的解决方案。


但这两种方法似乎都比通过$ rootScope.Angular 1做事的方式复杂得多。或$ scope。$ parent。$ broadcast。

Angular 2中的所有组件都是组件,我很惊讶没有更多有关组件通信的信息。

是还有另一种/更直接的方法可以做到这一点?

评论

您找到了兄弟共享数据的任何方法吗?我需要它是可观察的..

#1 楼

更新到rc.4:
当试图使数据在angular 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{

} 


及其两个子代

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;
    }
}


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 = '';
    }
}


现在:使用此方法时要注意的事情。


仅在PARENT组件中包括共享服务的服务提供者, children。
您仍然必须包括构造函数,并将服务导入到childs中。
最初为早期的angular 2 beta版本回答了此答案。虽然所有更改都不过是import语句,所以如果您偶然使用了原始版本,那么这就是您需要更新的所有内容。


评论


这对angular-rc1仍然有效吗?

–塞尔吉奥
16年5月16日在22:09

我不相信这会通知兄弟姐妹共享服务中的某些内容已更新。如果child-component1执行了child-component2需要响应的操作,则此方法将无法处理该问题。我相信解决方法就是观察到的东西?

– dennis.sheppard
16年5月26日在21:54



@Sufyan:我猜想将提供者字段添加到子代会导致Angular为每个子代创建新的私有实例。当您不添加它们时,它们将使用父级的“ singleton”实例。

–拉尔夫
16年6月15日在17:09

看起来这不适用于最新更新

– Sufyan Jabr
16年7月28日在10:41

这已经过时了。指令不再在组件中声明。

–内特·加德纳(Nate Gardner)
17年7月27日在23:07

#2 楼

对于2个不同的组件(非嵌套组件,parent \ child \ grandchild),我建议您这样做:


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);
  }

}



宇航员组件:


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();
  }
}



来源:父母和子女通过服务进行交流


评论


希望您在此答案中添加一些术语。我认为它不完全符合RxJS,Observable模式等。但是对其中一些内容添加说明将对人们(例如我自己)有利。

–卡恩斯
18年1月17日在22:59

#3 楼

一种方法是使用共享服务。

但是我发现以下解决方案要简单得多,它允许在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> 


app-sibling2.component.ts

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

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


评论


这是否与松散耦合以及部件松散的想法相反?

–罗宾
19年8月14日在15:05

有人知道这是干净的还是肮脏的方式?在一个方向上共享数据似乎要简单得多,例如仅从sibiling1到sibiling2共享数据,而不是从另一方向共享数据

–萨拉
7月18日13:08

#4 楼



这里有一个讨论。

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

Alex J的回答很好,但是不再截至2017年7月,该版本可与当前的Angular 4一起使用。

,该链接器将演示如何使用共享服务和可观察的对象在兄弟姐妹之间进行通信。
plnkr.co/P8xCEwSKgcOg07pwDrlO/

#5 楼

指令在某些情况下可以“连接”组件。实际上,连接的东西甚至不需要是完整的组件,有时,如果不是的话,它更轻巧,实际上更简单。

例如,我有一个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
   }
}


ProductPage.component的HTML中,其中youtube-player显然是包装Youtube API的我的组件。
<youtube-player #technologyVideo videoId='NuU74nesR5A'></youtube-player>

... lots more DOM ...

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


该指令为我完成了所有工作,而且我不必在HTML中声明(click)事件。

因此,该指令可以很好地连接到视频播放器,而无需让ProductPage作为调解员。

这是我第一次真正做到这一点,因此尚不确定在更复杂的情况下它的扩展性。为此,尽管我很高兴,但它使我的HTML变得简单,而所有事情的职责却截然不同。

评论


要理解的最重要的角度概念之一是,组件只是带有模板的指令。一旦您真正理解了这意味着什么,那么指令就不会那么可怕了-您将意识到可以将它们应用于任何元素以将行为附加到它。

–Simon_Weaver
18-10-7在21:09

我已经尝试过了,但是对于同等的玩家却收到重复的标识符错误。如果我不提玩家的第一提,就会遇到rangeError。我对此应该如何工作感到困惑。

–凯瑟琳·奥斯本(Katharine Osborne)
18/12/18在20:20

@KatharineOsborne看起来像在我的实际代码中,我将_player用作代表玩家的私有字段,所以是的,如果您完全复制了此内容,将会出错。将更新。抱歉!

–Simon_Weaver
18/12/19在7:14



#6 楼

这是简单的实际解释:在这里简单解释

在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();
 }
}


要调用的组件observable可以通知单击按钮的另一个组件

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/

评论


嘿,非常感谢您提供的简单解决方案>我在stackblitz中尝试了一下,效果很好。但是我的应用程序具有延迟加载的路由(已使用提供的“ root”)和HTTP调用来进行设置和获取。您能帮我HTTP呼叫吗?尝试了很多但是没用:

– Kshri
6月25日8:23

#7 楼

共享服务是解决此问题的好方法。如果您还想存储一些活动信息,则可以将“共享服务”添加到主模块(app.module)提供程序列表中。
@NgModule({
    imports: [
        ...
    ],
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        SharedService,
        ...
    ]
});

使用共享服务,您可以使用功能,也可以创建一个主题来一次更新多个地点。
constructor(private sharedService: SharedService)
 

在列表组件中,您可以发布单击的项目信息,
@Injectable()
export class SharedService {
    public clickedItemInformation: Subject<string> = new Subject(); 
}

,然后您可以在详细信息组件中获取此信息:
this.sharedService.clikedItemInformation.next("something");

显然,列出组件的数据可以是任何东西。希望这会有所帮助。

评论


这是共享服务这一概念的最直接的示例(又名简洁),并且由于没有公认的答案,因此应该真正提高它的可见性。

–iGanja
19/12/22在19:26

#8 楼

您需要在组件之间设置父子关系。问题在于,您可能只是将子组件注入到父组件的构造函数中,并将其存储在本地变量中。
相反,您应该使用@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生命周期挂钩之后,子组件在父组件的构造函数中将不可用。要抓住这个钩子,可以像使用AfterViewInit一样,在父类中简单地实现OnInit接口。 //blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/

#9 楼

行为主体。我写了一个博客。

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

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


在此示例中,我声明了Noid行为主题,其编号为number。这也是可观察的。而且,如果“发生了某些事情”,它将随着new(){}函数而改变。

因此,在同级组件中,一个将调用该函数进行更改,而另一个将受到该更改的影响,反之亦然。

例如,我从URL获取ID,并从行为主题更新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']); 
              } 
          }) 
    }) 
}


#10 楼

这不是您真正想要的,但是可以肯定会帮助您。

我很惊讶没有更多有关组件通信的信息<=>
请参阅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的本教程以获取更多信息。

#11 楼

我一直在通过绑定将父级的setter方法传递给它的子级之一,并使用子级组件中的数据调用该方法,这意味着父级组件已更新,然后可以使用新数据更新其第二个子级组件。它确实需要绑定“ this”或使用箭头功能。

这样做的好处是,孩子之间并不需要那么特殊,因为他们不需要特定的共享服务。

我不完全确定这是最佳实践,听听其他人对此的看法会很有趣。

#12 楼

我还喜欢通过输入和输出通过父组件在2个兄弟姐妹之间进行通信。它比使用普通服务更好地处理OnPush更改通知。
或仅使用NgRx Store。
示例。
@Component({
    selector: 'parent',
    template: `<div><notes-grid 
            [Notes]="(NotesList$ | async)"
            (selectedNote)="ReceiveSelectedNote($event)"
        </notes-grid>
        <note-edit 
            [gridSelectedNote]="(SelectedNote$ | async)"
        </note-edit></div>`,
    styleUrls: ['./parent.component.scss']
})
export class ParentComponent {

    // create empty observable
    NotesList$: Observable<Note[]> = of<Note[]>([]);
    SelectedNote$: Observable<Note> = of<Note>();

    //passed from note-grid for selected note to edit.
    ReceiveSelectedNote(selectedNote: Note) {
    if (selectedNote !== null) {
        // change value direct subscribers or async pipe subscribers will get new value.
        this.SelectedNote$ = of<Note>(selectedNote);
    }
    }
    //used in subscribe next() to http call response.  Left out all that code for brevity.  This just shows how observable is populated.
    onNextData(n: Note[]): void {
    // Assign to Obeservable direct subscribers or async pipe subscribers will get new value.
    this.NotesList$ = of<Note[]>(n.NoteList);  //json from server
    }
}

//child 1 sibling
@Component({
  selector: 'note-edit',
  templateUrl: './note-edit.component.html', // just a textarea for noteText and submit and cancel buttons.
  styleUrls: ['./note-edit.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NoteEditComponent implements OnChanges {
  @Input() gridSelectedNote: Note;

    constructor() {
    }

// used to capture @Input changes for new gridSelectedNote input
ngOnChanges(changes: SimpleChanges) {
     if (changes.gridSelectedNote && changes.gridSelectedNote.currentValue !== null) {      
      this.noteText = changes.gridSelectedNote.currentValue.noteText;
      this.noteCreateDtm = changes.gridSelectedNote.currentValue.noteCreateDtm;
      this.noteAuthorName = changes.gridSelectedNote.currentValue.noteAuthorName;
      }
  }

}

//child 2 sibling

@Component({
    selector: 'notes-grid',
    templateUrl: './notes-grid.component.html',  //just an html table with notetext, author, date
    styleUrls: ['./notes-grid.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class NotesGridComponent {

// the not currently selected fromt eh grid.
    CurrentSelectedNoteData: Note;

    // list for grid
    @Input() Notes: Note[];

    // selected note of grid sent out to the parent to send to sibling.
    @Output() readonly selectedNote: EventEmitter<Note> = new EventEmitter<Note>();

    constructor() {
    }

    // use when you need to send out the selected note to note-edit via parent using output-> input .
    EmitSelectedNote(){
    this.selectedNote.emit(this.CurrentSelectedNoteData);
    }

}


// here just so you can see what it looks like.

export interface Note {
    noteText: string;
    noteCreateDtm: string;
    noteAuthorName: string;
}