Angular - 动态显示组件

Posted 2023-03-13

【中文标题】Angular - 动态显示组件

【英文标题】：Angular - Show components dynamically

【发布时间】：2019-07-26 03:17:21

【问题描述】：

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

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

页脚组件的 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>

【参考方案1】：

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

【参考方案2】：

您可以使用看起来像这样的*ngIf 和eventEmitter。这是*ngIf 和eventEmitter 的文档。只要确保您正在导入 eventEmitter 和输出。 Parent 是在 html 中有页脚和聊天的组件，child 是页脚。

解决方案

孩子

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

然后在页脚组件中

public @Output() notifyParent: EventEmitter<any> = new EventEmitter();

public sendNotification(): void

    this.notifyParent.emit();

然后回到你的父母，它应该看起来像这样。

家长

<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 *ngIf="showChat"></app-chatbot> //important line
            </div>
            <app-footer (notifyParent)="toggleDisplay($event)" class="footer">
            </app-footer>
        </div>
    </div>
</div>

这意味着在父组件中您将拥有该功能

public showChat: boolean = false;

public toggleDisplay(data): void

    this.showChat = !this.showChat

这应该会为您切换显示。

说明

上面的函数会将它切换为隐藏和显示，如果您只想让它显示，请将布尔值设置为 true。 *ngIf 将确保组件在设置为 true 之前不会呈现。这让您可以创造性地使用布尔值切换/设置为 true。

事件发射器用于从子级向父级发送消息，然后父级运行函数来切换*ngIf 正在使用的布尔值。 Angular 中的组件交互有很多方法，请参阅documentation they provide。

【讨论】：

showChatWindow() 的代码是否应该放在页脚组件中？

Typescript 应该进入 在 html 中的组件，我只是注意到 showChat 函数在页脚组件中，所以上面的答案不会完全起作用让我编辑。没错，您进行切换的功能是在脚部补偿中？

是的.. 切换调用应该在页脚 html 中。

我的错，只是一分钟

这应该有帮助:-)

【参考方案3】：

您可以使用一个标志并将其作为参数传递给链接点击事件的函数：

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

在对应的组件中声明一个标志变量（可以在构造函数中初始化为false）：

public flag: boolean;

public constructor()
    this.flag = flase;

并在函数中执行以下操作：

public showChatWindow(f)

    this.flag = f ? false: true;

最后在主组件模板中：

<app-chatbot *ngIf="flag"></app-chatbot> 

该功能充当开/关开关。