Question

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

我想在页脚中包含一个链接，该链接可将聊天组件呈现在app组件中。仅在单击页脚中的链接时，才应显示聊天组件。

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

Answer 1

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

Answer 2

您可以像这样使用*ngIf和eventEmitter。以下是*ngIf和eventEmitter的文档。只要确保您要导入eventEmitter和输出即可。父级是在HTML中具有页脚和聊天的组件，子级是页脚。

解决方案

孩子

<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。

Answer 3

您可以使用标志并将其作为参数传递给链接的click事件的功能：

<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>

该功能用作打开/关闭开关。

角度-动态显示组件

3 个答案: