首页 文章

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

提问于
浏览
2

我在Angular2中有一个要求,我需要打开第一个弹出窗口,用户会输入一些值 . 在某些用户事件(即按钮单击)上,我需要关闭该弹出窗口并打开另一个弹出窗口,其中包含用户在第一个弹出窗口中输入的值 .

我创建了一个plunker,我创建了一个Login组件,这是我的第一个弹出窗口,Home组件是第二个弹出窗口 . 在输入用户凭据时,它应导航到主组件 . 我有点震惊,即如何将用户名值从第一个弹出窗口传递到第二个弹出窗口,还有如何关闭第一个弹出窗口并加载第二个弹出窗口?

任何人都可以帮我解决这个问题,让我知道我的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));
  }
}

1 回答

  • 0

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

    Service

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

    App Module

    @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
     }
    }
    

    Note: 唐't set the providers for SharedService in the components, otherwise it won' t成为共享

相关问题