Angular 9 компонентное взаимодействие

Question

У меня есть два компонента в моем проекте angular, которые мне нужны данные в одном компоненте, чтобы получить их из другого компонента. Seat-modal - это то место, где находятся мои данные. Следующее - seat-modal.ts.

    import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { SocketService} from '../../_services/socket.service';


@Component({
  selector: 'app-seat-modal',
  templateUrl: './seat-modal.component.html',
  styleUrls: ['./seat-modal.component.less']
})
export class SeatModalComponent implements OnInit {

  formRequestSeat: FormGroup;
  socket;
  public seat;
  showModal: boolean;
  public screenName: string;

  constructor(private socketService: SocketService,
              private modalService: NgbModal,
              private formBuilder: FormBuilder) { }

  ngOnInit(){
    this.formRequestSeat = this.formBuilder.group({
      seatRequest: ['', Validators.required]
    });
  }

  hide(){
    this.modalService.dismissAll();
  }

  join(seat){
    const userToken = localStorage.getItem('userToken');
    const tableToken = localStorage.getItem('tableToken');
    this.socket = this.socketService.init(userToken);
    const displayName = this.formRequestSeat.controls.seatRequest.value;
    if (!displayName){
      alert('Please enter a display name');
      return;
    }
    this.socket.emit('join', {tableToken, displayName, seat}, (data) => {
      // data.forEach((index, value) => {
      //   // this.seatsFormGroup.controls['seat-' + index].value(value);
      // });
      console.log(data.screenName);
      this.screenName = data.screenName;


    });
    this.hide();

  }


}

Follow - это модальное место. html

    <div class="modal" id="{{seat.id}}" [style.display]="showModal ? 'block' : 'none'">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Seat{{seat.id}}</h4>
        <button type="button" class="close" data-dismiss="modal" (click)="hide()">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form [formGroup]="formRequestSeat" (submit)="join(seat.id)">
          <div class="form-group col-6">
            <label for="name">Your Name</label>
            <input formControlName="seatRequest" type="text"/>
          </div>
        <div>
          <button type="submit" class="button-request-seat">Request The Seat</button>
        </div>
        </form>
      </div>

    </div>
  </div>
</div>
<app-play-game [parentData]="screenName"></app-play-game>

Follow - это мой другой компонент ts

 import {Component, Input, OnInit} from '@angular/core';
    import {AlertService} from '../../_services/alert.service';
    import {SocketService} from '../../_services/socket.service';
    import { FormBuilder, FormGroup, FormArray, FormControl, 
    ValidatorFn} 
    from '@angular/forms';
    import { of } from 'rxjs';
    import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
    import {SeatModalComponent} from '../../_components/seat-modal/seat- 
    modal.component';
    @Component({
    selector: 'app-play-game',
    templateUrl: './play-game.component.html',
    styleUrls: ['./play-game.component.less']
    })
    export class PlayGameComponent implements OnInit {
    @Input() public parentData;
    seatsFormGroup: FormGroup;
    seats = [];
    showModal: boolean;
    public seatModalRef;
    private socket;
    constructor(private socketService: SocketService,
              private formBuilder: FormBuilder,
              private modalService: NgbModal) {

    this.seatsFormGroup = this.formBuilder.group({
      'seat-0': [''],
      'seat-1': [''],
      'seat-2': [''],
      'seat-3': [''],
      'seat-4': [''],
      'seat-5': [''],
      'seat-6': [''],
      'seat-7': [''],
      'seat-8': [''],
      'seat-9': ['']
    });

    for (let i = 0; i < 10; i++) {
      this.seats.push( 'seat-' + i);
    }
    }

    ngOnInit(){
    console.log('name=' + this.parentData);
    }


    sit(seat){
    this.seatModalRef = this.modalService.open(SeatModalComponent);
    this.seatModalRef.componentInstance.seat = seat;
    this.seatModalRef.componentInstance.showModal = true;
    }
    }

Я пробовал console.log (this.parentData), но это не определено. Помогите, пожалуйста, с кодами Я новичок в angular.

Answer 1

Исправьте SeatModalComponent с помощью ниже.

public screenName: String = 'Sahan';

Answer 2

компонент вашего места должен быть изменен с

export class SeatModalComponent implements OnInit {public screenName: 'Sahan';}

на

export class SeatModalComponent implements OnInit {public screenName: string = 'Sahan';}

В настоящее время вы указали ему строку Sahan как тип, а не значение. Двоеточие (:) используется для указания типа, где equals (=) используется для присвоения значения.