通話記錄莫代爾從登錄模態，並呼籲從註冊登錄莫代爾莫代爾......導致內存棧溢出錯誤

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(); 
} 
}