时间戳

首页 > 解决方案 > Angular - 动态显示组件

angular - Angular - 动态显示组件

问题描述

我有三个角度分量。一个是页脚组件，它显示为页面的页脚。一个是聊天组件，可以从任何地方调用。一个是主要的应用程序组件，我的网站布局就是在其中编写的。

我想在页脚中包含一个链接，该链接呈现应用程序组件中存在的聊天组件。聊天组件应仅在单击页脚中的链接时呈现。

页脚组件的 HTML：

<a (click)="showChatWindow()">Show Chat Window</a>

聊天组件的 HTML：

<div class="chatbox">
  <div class="chatHeader">
    Chat Window
  </div>
<div class="chatBody">
    Chat Body
  </div>
<div class="chatFooter">
    Chat Footer
  </div>
</div>

应用组件。它有app-chatbot和app-footer：

<div class="main-container">
    <app-header class="header"></app-header>
    <div class="content-container">
        <app-main-nav></app-main-nav>
        <div class="main-content">
            <div class="content-area">
                <router-outlet></router-outlet>
                <app-chatbot></app-chatbot>
            </div>
            <app-footer class="footer"></app-footer>
        </div>
    </div>
</div>

标签： angular

解决方案

您应该在应用程序组件上存储一个布尔变量，称为“chatShown”。当您单击 showChatWindow() 时，让该函数将 chatShown 布尔值切换为 true。已经在您的应用程序组件中拥有聊天组件 - 带有*ngIf="chatShown"，类似于<chat-component *ngIf="chatShown"></chat-component>

推荐阅读