Question

我有一个场景，用户可以从登录模式点击创建帐户以显示注册模式[注册是登录的孩子]。

同样，用户可以从注册模式点击登录以显示登录模式[登录是注册的孩子]。

问题是我在我的主页中加载登录模式。由于两个模态都在不断地相互加载，我得到堆栈内存完全错误。

我应该如何避免这种情况但能够同时做到这两种情况？

Answer 1

编辑（模态版）：

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

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

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

See code in above link

我创建了一个父级（AuthModal - 我没有使用模态但是我不能使用libs在plundr上工作;但它的工作方式相同）和2个孩子（LoginForm和RegisterForm）。

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

孩子们显示他们各自的表格（登录或注册）和一个更改为其他状态的按钮（登录注册或注册登录）。此按钮将向父级发出自定义事件，这将更改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();
}
}

从Login Modal调用Register Modal并从Register Modal调用Login Modal ...导致内存堆栈完全错误

3 个答案: