12 November 2018

Rxjs Bindding data giữa hai components không có mối liên hệ Angular 2+

Rxjs Bindding data
Hai components không có mối liên hệ 
bindding.service.ts
Angular 2+
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class Service {
    private subject = new Subject < any > ();
    //private subject = new BehaviorSubject<boolean>(false);

    sendData(event) {
        this.subject.next(event);
    }

    get responseData() {
        return this.subject.asObservable();
    }
}
first.component.ts
Angular 2+
import { Component } from '@angular/core';
import { Service } from '../bindding.service';

@Component({
  selector: 'first-app',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent {

  constructor(private service: Service) { }

  onKeypress(event: any) {
    this.service.sendData(event.target.value);
  }
}
second.component.ts
Angular 2+
import { Component } from '@angular/core';
import { Service } from '../bindding.service';

@Component({
  selector: 'second-app',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent {

  content: string = '';

  constructor(private service: Service) {
    this.service.responseData.forEach(event => this.content = event);
  }

}
app.module.ts
Angular 2+
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FirstComponent } from './first-component/first.component';
import { SecondComponent } from './second-component/second.component';
import { Service } from './bindding.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent , FirstComponent, SecondComponent],
  bootstrap:    [ AppComponent ],
  providers: [Service]
})
export class AppModule { }
app.component.html
Angular 2+
<first-app></first-app>
<hr/>
<second-app></second-app>



Related Posts:

  • HostListener event resize Angular 2+ HostListener Event Resize app.component.ts Angular 2+ onResize(event) { this.width = event.target.innerWidth; } or @HostListener('window:resize', ['$event']) onResize(event) { this.width = event.target.inner… Read More
  • HostListener event scroll Angular 2+ Event scroll Angular 2+ Angular 2+ import { Component, HostListener, Inject, NgModule, OnInit } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { D… Read More
  • Validation formBuilder trong Angular 2+ Validation FormBuilder Bước 1: Tạo project Angular 2 bấm vào đây app.component.ts Angular 2+ import { FormGroup, FormBuilder, Validators } from '@angular/forms'; constructor(private formBuilder… Read More
  • HostBinding và HostListener Angular 2+ HostBinding và HostListener app.component.html Angular 2+ <h2 class="high-light">Hello color host binding</h2> <input hostTest type="text"/> host-color.directive.ts Angular 2+ import { Dire… Read More
  • HostListener event key Angular 2+ Event key Angular 2+ Angular 2+ @HostListener('window:keydown', ['$event']) keyboardInput(event: any) { event.preventDefault(); event.stopPropagation(); this.which = event.which; this.keyCode = … Read More

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang