如何将参数/值从一个弹出窗口传递到Angular2中的另一个弹出窗口

Question

我在 Angular2 中有一个要求，我需要打开第一个弹出窗口，并且用户会输入一些值。在某些用户事件（即单击按钮）上，我需要关闭该弹出窗口并打开另一个弹出窗口，其中包含用户在第一个弹出窗口中输入的预填充值。

我创建了一个plunker，我创建了一个登录组件，这是我的第一个弹出窗口和主页组件，这是第二个弹出窗口。在输入用户凭据时，它应该导航到主组件。我在这里有点震惊，即如何将用户名值从第一个弹出窗口传递到第二个弹出窗口，以及如何关闭第一个弹出窗口并加载第二个弹出窗口？

谁能帮我解决这个问题，让我知道我的 plnkr 需要做哪些更改？

export class LoginModal implements CloseGuard, ModalComponent<CustomModalContext> {
  context: CustomModalContext;

  public username: string;
  public password: string;

  constructor(public dialog: DialogRef<CustomModalContext>, public modal: Modal) {
    this.context = dialog.context; // this is the dialog reference
    dialog.setCloseGuard(this);
  }

  openHome()
  {
     return this.modal.open(HomeModal,  overlayConfigFactory({ username }, BSModalContext));
  }
}

Answer 1

您需要通过在其中创建一个变量来将您的登录组件值存储在共享可注入服务中。

服务

@Injectable()
export class SharedService {
  public sharedValues:any;
}

应用模块

@NgModule({
imports: [BrowserModule,
      HttpModule],
declarations: [AppComponent],
providers: [SharedService],
bootstrap: [AppComponent]
}) export class AppModule { }

访问登录和主页组件中的值，如下所示：

import {SharedService} from 'path of service folder';
export class LoginModal {

constructor(private sharedService:SharedService) {
}

 click() {
  this.sharedService.sharedValues // get and set your values
 }
}

注意：不要在组件中设置SharedService的providers，否则不会共享