Question

我正在尝试执行集成任务，但是对于如何将数据从组件传递到组件感到有些困惑。集成是为了显示用户配置文件信息。用户个人资料信息分为两部分。联系信息和个人详细信息。

这是其中涉及的组件

profile.service.ts：我叫一个返回必要数据的端点

set /mstr/msg xsh:subst(/mstr/msg, 'ooty', 'chen') ;

my-details.component.ts：包含联系信息和个人详细信息组件的父组件

  getUserDetails(userId: string): Observable<any> {
    const token = this._storeService.getStoredData().id_token;
    const headers = new HttpHeaders()
      .set('Authorization', `Bearer ${token}`)
      .set('Content-Type', 'application/json');
    const options = { headers: headers };
    const url = `${this.candidateUrl}/Get/${userId}`;
    return this._http.get<any>(url, options);
  }

my-details.comonent.html

  ngOnInit() {
    const userId = this._storeService.getStoredData().profile.CandidateId;
    this._loader.start();

    this._profileService.getUserDetails(userId).subscribe((resp) => {
      this.user = resp;
      console.log(resp);
      const userDetails: GetUserByIdModel = {
        firstname: this.user.firstname,
        lastname: this.user.lastname,
        nationalityId: this.user.firstname,
        identityTypeId: this.user.identityTypeId,
        identityValue: this.user.identityValue,
        titleId: this.user.titleId,
        genderId: this.user.genderId,
        contactChannels: [
          { type: 1, value: this.user[0].value },
          { type: 2, value: this.user[1].value }
        ],
      };

      this._loader.stop();
    }, (error) => {
      this._loader.stop();
      this._errorService.openErrorPopup('Failed to get user data.');
    });
  }

GetUserByIdModel：我收到的数据的结构模型

  <div class="ui-g-4">
    <app-profile-contact-details [user]="user"></app-profile-contact-details>
  </div>
  <div class="ui-g-4">
    <app-profile-personal-details [user]="user"></app-profile-personal-details>
  </div>

子组件 profile-contact-details.component.ts

export class GetUserByIdModel {
  firstname: string;
  lastname: string;
  nationalityId: number;
  identityTypeId: number;
  identityValue: string;
  titleId: number;
  genderId: number;
  contactChannels: Array<ContactChannel>;
}

export class ContactChannel {
  type: number;
  value: string;
}

profile-personal-details.component.ts

<form [formGroup]="contactDetailsForm">
  <div class="email">
    <label>Email address</label>
    <input type="text" formControlName="email">
  </div>
  <div class="input-containers type">
    <label>Number type</label>
    <p-dropdown formControlName="contactNumberType" [options]="numberTypes" placeholder="Select"></p-dropdown>
  </div>
  <div class="contact-number">
    <label>Contact Number</label>
    <input type="text" formControlName="contactNumber">
  </div>
</form>

我的想法是profile.service.ts将数据返回到my-details父组件，然后填充该模型，然后由子组件调用该模型。我不确定该怎么做。请协助我处理数据流

角度整合流程

0 个答案: