时间戳

首页 > 解决方案 > 通过Angular 6中的父组件更新兄弟组件？

angular - 通过Angular 6中的父组件更新兄弟组件？

问题描述

我有三个组件父-房间组件和两个子组件roomslist和roomdetails，最初将使用ngif显示房间列表组件，当用户单击添加时，将显示房间详细信息，一旦用户在房间详细信息组件中添加房间，我需要在添加房间的房间列表页面中显示。谁能让我知道如何实现它？

--- 下面是代码

    export class PropertyRoomComponent implements OnInit
{   
    @Output("saveRoomDetails") roomDetailsEvent: EventEmitter<RoomDetail>
    = new EventEmitter<RoomDetail>();
  @Input("roomDetail")
  public roomDetail:
  RoomDetail = { rateDetails: [], occupancy: [], roomDetails: [] };

   SaveRoom()
    { 
    this.roomDetailsEvent.emit(this.roomDetail);
    }
    }

export class RoomComponent implements OnInit
    {
  @Input('roomsList')
  public PropertyRooms: RoomDetail[];  
  SaveRoom(room)
  { 
    this.PropertyRooms.push(room);
    this.showAddRoomWindow = false;
  }  
  }



<room-list [rooms]="this.PropertyRooms" (GetRoomDetail)="GetRoomDetail($event)"></room-list>    

        export class PropertyRoomListComponent implements OnInit {

  public BedType: any;

  public roomAmenities: any;

  @Input('rooms')
  roomsList: RoomDetail[];

 @Output("GetRoomDetail")
 GetRoomDetailEvent : EventEmitter<any> = new EventEmitter<any>();

  constructor(){
  console.log(this.roomsList); // undefined
  }

标签： angulartypescriptangular6

解决方案

这是一个基本的状态管理问题。您需要在某个地方保留您的房间。有几种方法可以做到这一点。

  1. 输入和输出事件。这需要您在每次进行更改时从子级向父级发出值，并且如果您开始发出太多事件，可能会变得过于复杂。

  2. 服务供应商！单例服务允许您共享对变量的引用，例如Rooms. 因此，您的子组件的任何编辑都可以在父组件或注入服务的任何其他组件中看到。

  3. Ngrx。redux 模式类似于依赖注入，但强制您遵循严格的模式来访问状态。

推荐阅读