Angular 14 如何显示和隐藏子组件

Question

每当我单击一个按钮时，我想在引导程序 offcanvas 组件上隐藏并显示一个登录/注册表单，但我不知道如何解决这个问题。

关键是，当我单击导航栏的登录按钮打开画布时，我想默认显示登录表单。 当我单击登录组件底部的注册按钮时，我想隐藏登录表单并显示注册组件，并对注册组件上的登录按钮执行相同操作。

navbar.component.html

<nav class="navbar">
   <div class="container-fluid">
       <div class="d-flex">

           <a href="" class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Log in</a>
           <app-login></app-login>
           <app-register></app-register>

       </div>
   </div>
</nav>

login.component.html

<!-- Offcanvas -->
<div class="offcanvas">
   <div class="offcanvas-body">
       <!-- Form -->
       <div>
           <form>
               <!-- Form inputs and labels-->
               <div>
                   <p> Don't have an account? <a href="">Register</a></p>
               </div>
           </form>
       </div>
       <!-- Form end -->
   </div>
   <!-- Offcanvas end -->

register.component.html

<!-- Offcanvas -->
<div class="offcanvas">
   <div class="offcanvas-body">
       <!-- Form -->
       <div>
           <form>
               <!-- Form inputs and labels -->
               <div>
                   <p> Already have an account? <a href="">Log in</a></p>
               </div>
           </form>
       </div>
       <!-- Form end -->
   </div>
   <!-- Offcanvas end -->

每当我单击 forms 的底部按钮时，有没有办法显示和隐藏组件？

Answer 1

您可以使用*ngIf ，但是，这可能不是解决此问题的最佳方法。 恕我直言，您应该使用<router-outlet></router-outlet>代替，并根据路径显示适当的路由组件。

请参阅官方文档中的此示例以开始使用。