如何在没有主题的情况下将数据从服务传递到组件？

Question

Below are 2 components first and second and it has a service to pass data. 2 components have the same form since its an exam how to type at first comp and display what is typed at second comp. So form is built at service and it's initialized at each component.

I am able to get and pass data from service and want to pass data from service to second comp without using Subject.

----first---
constructor(private service: TestServiceService) 
{ }

ngOnInit() {
    const sfm = new InputForm();
    this.form = this.service.createform(sfm);
    this.passDataInput();
}

passDataInput() {
     this.form.valueChanges.subscribe(val => {
         this.service.getData(val);
     });

-----service----
constructor(private formBuilder: RxFormBuilder)
{ }

getData(datalist: TipoData) {
    console.log('service ', datalist);
}

---second-----
ngOnInit() {
     const sfm = new InputForm();
     this.form = this.service.createform(sfm);
     this.form.disable();
     this.service.getData(this.data); 
}

Answer 1

Let me explain two ways may be helpful to you. considering you strictly don't want to use Subject.

1) if your first component and second component both shares the same html you can use the EventEmitter approach.

2) if they are on different route you can subscribe to params and on response you can ask your service to give you data which you already have it.

---

Update

Here I'm giving you answer for my option 1 where I assume you have both component shares same html.

I have created two component named first and second and they shares same html app.component.html

Brief View:

Here first component has form with one input, When submitted we pass the formData by eventEmitter. We capture the data on parent on upon getting the data we toggle second component to display received data.

here how I code it with very minimal approach.

app.component.html

    <div>
      <app-first (onSubmitFormData)="updateFormData($event)"></app-first>
      <app-second formData="{{dataReceived}}" *ngIf="isVisible"></app-second>
    </div>

app.component.ts

     dataReceived;
      isVisible = false;

      updateFormData(data) {
        this.isVisible = true;
        this.dataReceived = data;
      }

first.component.html

    <form (ngSubmit)="onSubmit()" #f="ngForm">
      <input type="text" name="username" ngModel />
      <button type="submit">Submit</button>
    </form>

first.component.ts

      @ViewChild('f') form: NgForm;
      @Output() onSubmitFormData = new EventEmitter<any>();

      constructor() { }
      onSubmit() {
        this.onSubmitFormData.emit(JSON.stringify(this.form.value));
      }

second.component.html

<p> {{ secondCompoData.username }} </p>

secon.component.ts

    @Input() formData;
      secondCompoData;
      constructor() { }

      ngOnInit() {
        this.secondCompoData = JSON.parse(this.formData);
      }