Question

我有三个组件父组件-带有两个子组件的room组件roomlist和roomdetails，最初，当用户单击添加时，将使用ngif显示roomslist组件-一旦用户在房间详细信息中添加了房间，就会显示roomdetails组件，我需要在添加了房间的房间列表页面中显示该组件。谁能让我知道该怎么做？

---下面是代码

    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
  }

Answer 1

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

输入和输出事件。这要求您每次进行更改时都要从子级向父级发出值，如果您开始发出太多事件，则可能会变得过于复杂。
服务/提供者！单例服务使您可以共享对变量的引用，例如services.AddIdentityServer(SetupIdentityServer) private static void SetupIdentityServer(IdentityServerOptions options) { options.UserInteraction.LoginUrl = @"client.company.com/login.html"; options.UserInteraction.LoginReturnUrlParameter = "referrer"; }。因此，可以在父组件或注入服务的任何其他组件中看到子组件的任何编辑。
Ngrx。 redux模式类似于依赖注入，但是会强制您遵循严格的模式来访问状态。

通过Angular 6中的父组件更新同级组件？

1 个答案: