Способ связи между двумя одноуровневыми компонентами с использованием Angular 7 без использования общего сервиса для обоих

Question

Здесь я хочу общаться между двумя компонентами одного и того же родителя. В основном, я хочу передать данные из одного компонента в другой.

FirstComponent.ts

constructor(
    private service: service1,
    private serve: service2,
) {}

ngOnInit() {
    this.service.getUser().subscribe((data) => {
        this.serve.setAccount("1", "apple");
        this.serve.setEnvironment("Happy"); 
    })
}

SecondComponent.ts

constructor(private usingService : service2) { }

 ngOnInit() {
 this.Account = this.serve.getAccount();
 this.environmentDetails = this.serve.getEnvironment();

 }

Мне нужно извлечь данные из firstComponent во second.here первый компонент загружается после второго component.soo, данные, установленные первым компонентом, появляются позже на рисунке.

Попытка использования subject of rxjs.but, Как мы можем использовать subject в firstComponent.ts этого примера?

Как я могу общаться между этими двумя компонентами, если они являются братьями и сестрами друг друга? Пожалуйста, помогите

Answer 1

Вы можете использовать @Input() @Output() декораторов с EventEmitter.Родительский компонент будет устанавливать данные о дочерних элементах через привязку.Дети отправят новые данные родителю и сбросят данные, которые получают дети.

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
              <app-first-component 
                  [data]="data" (onData)="updateData($event)"></app-first-component>
              <app-second-component 
                  [data]="data" (onData)="updateData($event)"></app-second-component>
            `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  public data: any;

  constructor() {}

  updateData(event) {
    this.data = event;
  }

}

first.component.ts

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

  @Input()
  public data: any

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

  constructor() { }

  updateData(data) {
    //send data back to parent
    //data could be coming from a service/async http request as well.
    this.onData.emit(data)
  }

}

second.component.ts

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

  @Input()
  public data: any

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

  constructor() { }

  updateData(data) {
    //send data back to parent
    //data could be coming from a service/async http request as well.
    this.onData.emit(data)
  }

}