Angular - 动态显示组件答案

【问题标题】：Angular - Show components dynamicallyAngular - 动态显示组件
【发布时间】：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>

【问题讨论】：

标签： angular

【解决方案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>

该功能充当开/关开关。

【讨论】：