Question

我有以下带有ng-dynamic-component和gridster2的angular 7代码。

=> component.ts

@Component({
  selector: 'app-navigation-index',
  templateUrl: './navigation-index.component.html',
  styleUrls: ['./navigation-index.component.less']
})

export class NavigationIndexComponent {
  // The Id for the child maps that will be synched
  synchGroupId: string = uuid();


  subscription = new Array<Subscription>();

  private selectedDrone: UAVsStoreModels.IUAV;
  private selectedMission: MissionsStoreModels.IMission;
  private selectedWaypoint: MissionsStoreModels.IWaypoint;

  dashboard: Array<GridsterItemCustom> = [
    {cols: 4, rows: 10, y: 0, x: 1, type: NavigationMiniMapComponent, inputs: { selectedDrone : this.selectedDrone, selectedMission : this.selectedMission, synchGroupId : this.synchGroupId}, name: 'MINIMAP_NAME', id: 'waypoint'},
    {cols: 4, rows: 10, y: 0, x: 5, type: NavigationVrMapComponent, inputs:  { selectedDrone : this.selectedDrone, selectedMission : this.selectedMission, selectedWaypoint : this.selectedWaypoint, synchGroupId : this.synchGroupId}, name: 'VRMAP_NAME', id: 'vrMap'},
    // {cols: 4, rows: 5, y: 0, x: 1, type: NavigationRealMapComponent, name: 'REALMAP_NAME', id: 'videocam'},
    {cols: 1, rows: 3, y: 7, x: 0, type: NavigationWaypointUiComponent, name: 'WAYPOINT_INFO_NAME', id: 'informationn'},
    {cols: 1, rows: 3, y: 1, x: 0, type: NavigationDroneUiComponent, name: 'DRONE_INFO_NAME', id: 'droneNav'},
    {cols: 1, rows: 3, y: 4, x: 0, type: NavigationMissionUiComponent, name: 'ROUTE_INFO_NAME', id: 'routes'},
  ];

  constructor(private MapSyncherService: NavigationMapSyncherService,
              private WaypointSyncherService: NavigationWaypointSyncherService,
              private store$: Store<RootStoreState.IAppState>) {
                this.MapSyncherService.createSynchGroup(this.synchGroupId);
                this.WaypointSyncherService.createSynchGroup(this.synchGroupId);

                this.subscription.push(
                  this.store$.pipe(select(UAVsStoreSelectors.selectSelectedUAV)).subscribe((drone) => {
                    this.selectedDrone = drone;
                  }),
                  this.store$.pipe(select(MissionsStoreSelectors.selectSelectedMission)).subscribe((route) => {
                    this.selectedMission = route;
                  }),
                  this.store$.pipe(select(MissionsStoreSelectors.selectSelectedPoint)).subscribe((waypoint) => {
                    this.selectedWaypoint = waypoint;
                  })
                );
              }
}

然后输入我的template.html

<gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard" id="{{item.id}}">
        <div class="gridster-item__header" *ngIf="item.name">
          <p class="gridster-item__header__title">{{ 'NAVIGATION.PANEL.'+item.name | translate }}<p>
        </div>
        <div class="gridster-item__content">
          <ndc-dynamic [ndcDynamicComponent]="item.type" [ndcDynamicInputs]="item.inputs"></ndc-dynamic>
        </div>
    </gridster-item>
</gridster>

这很好，直到我添加ngrx存储之前，我希望输入在每次存储更新新值时刷新。但是，在动态导入的组件中，似乎始终未定义selectedMission / selectedWaypoint / selectedDrone。如何将输入的更改也反映在子组件中？

ng-dynamic-component不更新我的输入

0 个答案: