Используя событие emit, я хочу передать служебные данные из компонента A в B

Question

Постановка проблемы - у меня есть сервис, Компонент A и Компонент B. В сервисе я вызываю мой Git Api, чтобы получить пользователя в методе setApi. Я устанавливаю имя пользователя здесь из компонента А по нажатию кнопки. В компоненте B я хочу напечатать некоторые детали, вызвав метод getAPi той же службы.

Мой подход - я могу сделать это с одним компонентом, но когда я делаю это с двумя компонентами, я не могу вызвать сервис тот же объект. Так что я хочу сделать это с Event Emit. Я очень плохо знаком с angular Я не понимаю, как использовать Event Emit.

здесь Пользователь - это класс, в который я загружаю данные, так что не запутайтесь.

Я хочу сделать из компонента A я хочу отправить имя пользователя, а в компоненте B щелкнуть по кнопке компонента A, и я хочу, чтобы данные печатались в компоненте B Html.

Может кто-нибудь сказать мне, чтобы проверить, не является ли пустым текстовое поле компонента A также используется метод реактивной формы.

Service.ts

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GituserdetailsService {
   username:String;

  constructor(private http:HttpClient) { }
setApi(username:String)
{
this.username=username;
console.log(this.username);
}

getApi():Observable<any>
{
  console.log(`http://api.github.com/users/`+this.username);
  return this.http.get(`http://api.github.com/users/`+this.username);

}

    /*searchUser(username:String) :Observable<any>
   {
     console.log(`http://api.github.com/users/`+username);
    return this.http.get(`http://api.github.com/users/`+username)    
}*/

}

Компонент A userDetails.ts

import { GituserdetailsService } from '../service/gituserdetails.service';
import { JsonPipe } from '@angular/common';
import { DetailsComponent } from '../details/details.component';
import { User } from '../user';
import {FormBuilder, FormGroup , FormControl, Validators} from '@angular/forms'

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

export class UserdetailsComponent implements OnInit {
  form: FormGroup;
formSubmitted = false;
errorMessage:any;
username:string ;
details:any;
user:any=new User;
  constructor(private GituserdetailsService:GituserdetailsService,private formBuilder: FormBuilder) { }
  buildForm() {
    this.form = this.formBuilder.group({
      username:[null,[Validators.required]]
    });
  }
  ngOnInit(): void {

    //this.searchUserDetails();

  }
searchUserDetails() :void{ 
  this.details = [];
  this.GituserdetailsService.setApi(this.username);

  //console.log(this.username);

}
}

Компонент B details.ts

import { GituserdetailsService } from '../service/gituserdetails.service';
import { UserdetailsComponent } from '../userdetails/userdetails.component';
import { User } from '../user';
@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})

export class DetailsComponent implements OnInit {
  errorMessage:any;
  username:string ;
  user:any=new User;

  constructor(private GituserdetailsService:GituserdetailsService) { }

  ngOnInit(): void {
  }
  searchUserDetails() :void{ 
    this.GituserdetailsService.getApi().subscribe((data: any[])=>{
      this.user = data; 
      console.log(this.user);   
    },error=>{
      this.errorMessage=error.statusText;
      alert(this.errorMessage);
    });
  }

}

Answer 1

Вы можете сделать это с помощью Subjects

import { EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GituserdetailsService {
  searchUserDetails = new EventEmitter<void>();
....

Компонент A:

...
searchUserDetails() :void{ 
  this.details = [];
  this.GituserdetailsService.setApi(this.username);
// we call next to trip the subscribers
  this.GituserdetailsService.searchUserDetails.emit();
  //console.log(this.username);

}
...

Компонент B:

import { switchMap } from 'rxjs/operators';
.....
ngOnInit(): void {
   this.listenToSearchUserDetails();
  }

  listenToSearchUserDetails() {
    this.GituserdetailsService.searchUserDetails.pipe(
      // once searchUserDetails emits, switch it over to API call
      switchMap(_ => this.GituserdetailsService.getApi()),
    ).subscribe((data: any[])=>{
      this.user = data; 
      console.log(this.user);   
    },error=>{
      this.errorMessage=error.statusText;
      alert(this.errorMessage);
    });
  }

Поскольку текстовое поле требуется, я думаю Validators.required достаточно хорошо. Что вы можете сделать, так это проверить this.form.valid =>, верно ли это, продолжить, если нет, не разрешать операцию.