角度显示组件动态显示

Question

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

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

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

您可以使用类似的*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。在将组件设置为true之前，*ngIf将确保组件不会呈现。这使您在如何使用布尔值切换/设置为true时具有创造性。

事件发射器用于从子节点向正在运行该函数的父节点发送消息，以切换*ngIf使用的布尔值。关于角度内的组件交互，有很多种方法，参见他们提供的文件。

Answer 2

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

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> 

该函数充当一个开关。