通话记录莫代尔从登录模态，并呼吁从注册登录莫代尔莫代尔......导致内存栈溢出错误

Question

我有一种情况，用户可以点击从登录模式创建账号显示注册模式[注册是一个孩子登录]。

类似地，用户可以从注册模式点击登录以显示登录模式[登录是注册的子]。

问题是我在我的主页加载登录模态。由于两个模态都在不断加载对方，我越来越堆栈内存满错误。

我应该如何避免这种情况，但有能力做到这一点？

Answer 1

EDIT（莫代尔版）：

基本上，你不能有A和B和B的孩子的孩子，因为它变成一个无限循环。所以，解决这个问题的一个方法是让一个父母和两个孩子。

您的父母一次显示一个孩子，孩子可以通知父母更换为另一个孩子。

Plunkr：https://plnkr.co/edit/VcWXeL?p=preview

See code in above link 

我创建了一个父（AuthModal - 我没有用一个模式，但一个div，因为我不能让库上plundr工作，但它的工作方式相同）和2个孩子（LoginForm和RegisterForm）。

父级保持显示窗体的状态（属性isLoginForm），其模板在属性为true时显示组件LoginForm，在属性为false时使用ngIf指令显示RegisterForm。

孩子们显示他们各自的表格（登录或注册）和一个按钮来切换到另一个状态（登录到注册或注册登录）。此按钮将向父级发出一个自定义事件，这将改变isLoginForm属性的状态，使其显示其他形式的其他子组件。

正如我所说，这是做到这一点的方法之一。我只能使用一个组件AuthModal并在模板中写入两个表单，从而节省了2个子组件和事件。但是这样就更清楚了。

希望这有助于！

老答案（非模态只）：

您可以创建一个父组件（如AuthComponent），它可以加载您LoginComponent和RegisterComponent。

因此，在父组件中，您可以使用router-outlet标签一次加载您的某个子组件。

然后在每个子组件中使用链接来赋予使用routerLink指令加载另一个组件的能力。

Answer 2

不这样做它适用于无限递归调用。

具有作为父母的都LoginComponent和RegistrationComponent容器组件

<login-component #login (registerClicked)="openRegister($event)"></login-component> 
<registration-component #register></registration-component> 

当点击登录组件的注册按钮发出事件和处理，在你的容器组件，反之亦然

Answer 3

的下面的一段代码为我工作

@Component({ 
selector: 'user-management', 
template: ` 
     <login-modal-app #loginModal (switchToRegister)="switchToRegister()"></login-modal-app> 
     <register-modal-app #registerModal (switchToLogin)="switchToLogin()"></register-modal-app> 
`, 
encapsulation: ViewEncapsulation.None 
}) 
export class UserManagementComponent { 
@ViewChild('loginModal') public loginModal: LoginModalComponent; 
@ViewChild('registerModal') public registerModal: RegistrationModalComponent; 

constructor() { } 

switchToRegister() { 
    this.loginModal.hideModal(); 
    this.registerModal.showModal(); 
} 
switchToLogin() { 
    this.registerModal.hideModal(); 
    this.loginModal.showModal(); 
} 
}