角度2兄弟元件通信

在某些情况下，指令可以用来“连接”组件。事实上，被连接的东西甚至不需要是完整的组件，有时候如果它们不是完整的组件，它会更轻量级，实际上更简单。

例如，我有一个 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 简单和责任的一切不同。

这里有一个简单实用的解释: 简单解释 给你

电话服务

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/

对于这个问题，共享服务是一个很好的解决方案。如果还想存储一些活动信息，可以将共享服务添加到主模块(app.module)提供程序列表中。

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

然后你可以直接把它提供给你的组件,

constructor(private sharedService: SharedService)
 

使用共享服务，您可以使用函数，也可以创建一个 Subject 来同时更新多个位置。

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

在列表组件中，您可以发布单击的项信息,

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

然后你可以在你的细节部分获取这些信息:

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

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

我还喜欢通过输入和输出在两个兄弟姐妹之间通过一个父组件进行通信。它比使用普通服务更好地处理 OnPush 更改通知。 或者直接用 NgRx 商店。

例子。

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

做兄弟姐妹通信的一个简单的方法是在一个孩子中使用 @ 输出修饰器，在另一个孩子中使用 模板引用变量让父母 调用这个孩子的方法。这非常类似于使用“输出”来进行孩子与父母之间的交流。

在 孩子2中执行 this.emitSomething.emit(something);将在 儿童1中触发 onEmitSomething()。

Child-1. Component. ts

onEmitSomething(event: any): void {
// do something
}

Child-2. Component. ts

@Output() emitSomething: EventEmitter<any> = new EventEmitter<any>();

组件

<child-1 #child1></child-1>
<child-2 (emitSomething)="child1.onEmitSomething($event)"></child-2>

这里可以找到两种不同的组件交互方式 角分量相互作用