Question

我在父组件中有一个表单（在模式窗口中）。提交表单时，我希望新数据反映在当前路线上。

以下功能在表单提交时触发

  submitAppointment(data) {

      this.dataService.postAppointment(data).subscribe( (res:any) => {
        if(res.status == 0) {
          alert(res.msg);
          $('#addAppointment').modal('hide');
          this.router.navigate(['/dashboard/schedule']);

        } else {
          alert(res.msg);
        }
      } )

  }

我已使用以下代码启用了导航至同一路线的功能

在child.component.ts

constructor(private router:Router, private dataService: DataService) { 
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
  }

在app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
}

现在这可以了。但是在子组件中，我在选项卡中列出了内容。每个选项卡代表一个日期。单击选项卡将获取与该日期（指定日期的约会）相关的数据。现在发生的是，如果我单击第二个或第三个选项卡，然后使用表单添加约会，则刷新后，选择将返回第一个选项卡（就像重新加载整页一样）。取而代之的是，我想在同一选项卡上看到更新的新数据，即，我想在不刷新整个组件的情况下查看该列中新输入的数据。我该怎么做？

下面的代码用于显示标签（日期从今天到一周）

<div class="top-row-right">
    <ul>
      <li class="date-selector"  *ngFor="let d of data.dates" (click)="loadDate(d.date)" 
        [ngClass]="date== d.date ? 'active' : '' ">
          <Strong>{{d.day}}</Strong>
          <small>{{d.date | date : "dd MMM" }}</small>
      </li>

    </ul>
</div>

和选定日期的约会与此一起显示

<tr *ngFor="let c of data.cArray">
  <td class="table-docname">
    <div class="doc-box">
      <div class="doc-pic">
          <img src="../../../assets/img/user-placeholder.png" />
        </div>
        <div class="doc-details">
          <small>ID {{c.id}}</small>
          <strong>{{c.name}}</strong>
        </div>
    </div>
  </td>

  <td *ngFor="let slot of c.slots">
      <div class="patient-box patient-normal" *ngIf="slot.status == 1">
          <small>ID {{slot.id}}</small>
          <strong>{{slot.patient_name}}</strong>

      </div>

  </td>

</tr>

从Angular的父组件刷新子组件

0 个答案: