如何在Angular 7中的所有屏幕上持久化组件？_Angular_Chatbot

如何在Angular 7中的所有屏幕上持久化组件？

angular

如何在Angular 7中的所有屏幕上持久化组件？,angular,chatbot,Angular,Chatbot,我正在尝试在我的Angular项目的所有屏幕上持久化聊天机器人组件。我尝试在app.component.html中引用组件的选择器，如下代码所示 <app-navbar></app-navbar> <section> <router-outlet></router-outlet> </section> <app-chat-popup></app-chat-popup> <app-footer

我正在尝试在我的Angular项目的所有屏幕上持久化聊天机器人组件。我尝试在app.component.html中引用组件的选择器，如下代码所示

<app-navbar></app-navbar>
<section>
  <router-outlet></router-outlet>
</section>
<app-chat-popup></app-chat-popup>
<app-footer></app-footer>

但它并没有像预期的那样链接组件。如果我指的是一个正常的组件，它在点击按钮时被触发，那么它就可以正常工作了。但我需要它出现在我项目的所有屏幕上。任何帮助都将不胜感激。谢谢

编辑：这是我的聊天组件HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    <!-- Message box -->
    <div class="chat_box">
      <div class="chat_header">
        <!-- <img src="user.jpg" class="user_icon" /> -->
        <h4 class="username">Virtual agent</h4>
        <i class="fas fa-times close"></i>
      </div>
      <hr />
      <div *ngIf="chatVisible" class="message_content">
          <ng-container #messageList *ngFor="let message of messages | async">

              <div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
                                                'to':   message.sentBy === 'user' }">
                {{ message.content }}
              </div>

            </ng-container>
      </div>
      <div class="input_box">
        <input [(ngModel)]="formValue" (keyup.enter)="sendMessage()" placeholder="Your message here..." type="text">
        <button (click)="sendMessage()">se</button>
        <i class="fas fa-location-arrow"></i>
      </div>
    </div>
  </body>
</html>


虚拟代理

{{message.content}
东南方

我使用@ViewChild做了类似的事情，它使用ngx引导模式显示在网站的每个页面上。如果您的聊天机器人窗口可以分配给一个模式，这应该可以正常工作。我用的是角度8 btw

您只需要将模态模块作为典型组件导入根组件，并保持index.html不变，在路由组件之外单独引用模态组件

import { ModalDirective } from 'ngx-bootstrap/modal';
import { Component, OnInit, ViewChild } from '@angular/core';
export class LoginBannerComponent implements OnInit {

constructor() {}

ngOnInit() {
}

@ViewChild('autoShownModal', { static: false })
autoShownModal: ModalDirective;
isModalShown = true;

showModal(): void {
    this.isModalShown = true;
}

hideModal(): void {
    this.autoShownModal.hide();
}

onHidden(): void {
    this.isModalShown = false;
}
accept(): void {
    this.autoShownModal.hide();
}

reject(): void {
    this.isChildModalShown = true;
    this.isModalShown = false;

}

和我的HTML模板：

<div #autoShownModal="bs-modal"
 (onHidden)="onHidden()"
 *ngIf="isModalShown"
 [config]="{ show: true, animated: true, backdrop: true, ignoreBackdropClick: true }"
 aria-labelledby="dialog-auto-name"
 bsModal
 class="fade modal"
 role="dialog"
 tabindex="-1">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body text-white"
             style="background-color: #0072CE">
            <p class="font-weight-bold h4 text-capitalize text-center">MODAL CONTENT HERE</p>
            <div class="modal-footer text-white">
                <button (click)="accept()"
                        class="btn btn-success mr-auto"
                        type="button">
                    Accept
                </button>
                <button (click)="reject()"
                        class="btn btn-danger"
                        type="button">
                    Reject
                </button>
            </div>
        </div>
    </div>
</div>


此处的模式内容
接受
拒绝

您可以使用moment.js和angular local storage等库，仅根据页面访问后的时间量等显示模态。

当您说您提供的示例代码未按预期工作时，您的意思是什么？聊天组件是根模块的一部分吗？@ViktorGarba，示例代码是我试图显示聊天机器人UI的地方，但我不知道我是否尝试了正确的方式，因为它没有将聊天UI显示为expected@christian聊天组件是chatModule的一部分，而chatModule又是根模块的一部分define“是的一部分”。张贴两个模块的代码。此外，组件视图是一个完整的HTML页面也没有任何意义。