JavaScript Angular 2同级组件通信
我有一个ListComponent。在ListComponent中单击某个项目时,该项目的详细信息应显示在DetailComponent中。两者同时显示在屏幕上,因此不涉及路由。
如何告诉DetailComponent单击ListComponent中的哪个项目?
我考虑过向父对象(AppComponent)发出事件,并让父对象使用@Input在DetailComponent上设置selectedItem.id。或者,我可以将共享服务与可观察的订阅一起使用。
编辑:通过事件+ @Input设置所选的项目不会触发DetailComponent,但是,以防万一我需要执行其他代码。因此,我不确定这是否是可接受的解决方案。
但是,这两种方法似乎都比通过Angular 1做事方式复杂得多,后者是通过$ rootScope。$ broadcast或$ scope。$ parent。$ broadcast实现的。
由于Angular 2中的所有内容都是组件,我很惊讶没有更多有关组件通信的信息。
是否有另一种/更直接的方法来完成此任务?
回答:
更新到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);
}
}
现在,这里是PARENT组件
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 = '';
}
}
现在:使用此方法时要注意的事项。
- 仅在PARENT组件中包括共享服务的服务提供者,而不在子组件中。
- 你仍然必须包括构造函数并将服务导入子项中
- 此答案最初是针对早期的angular 2 beta版本回答的。尽管所有更改都不过是import语句,所以如果你偶然使用了原始版本,则只需更新即可。
以上是 JavaScript Angular 2同级组件通信 的全部内容, 来源链接: utcz.com/qa/423447.html