Question

我试图在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>

Answer 1

我已经使用@ViewChild对使用ngx-bootstrap出现在网站每个页面上的模式进行了类似的操作。如果您的聊天机器人窗口可以分配给模式，则应该可以正常工作。我正在使用Angular 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 7的所有屏幕上保留组件？

1 个答案: