我在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));
}
}
答案 0 :(得分:0)
您需要通过在其中创建变量将登录组件值存储在共享可注入服务中。
<强>服务强>
@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的提供商,否则不会成为共享