Angular 9 component Interaction

Question

我的角度项目中有两个组件，我需要一个组件中的数据才能从另一组件中获取数据。座位模式是我的数据所在。以下是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();

  }


}

关注为seat-modal.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>

以下是我的其他内容

 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），但是它是未定义的。请帮助提供代码，我是角度的入门者。

Answer 1

您的座位组件应从]更改>

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

export class SeatModalComponent implements OnInit {public screenName: string = 'Sahan';}
目前，您已将Sahan字符串作为类型而不是值。冒号（:)用于提供类型，其中equals（=）用于分配值。

Answer 2

请用以下方法修复SeatModalComponent。