我正在尝试在我的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>
我使用@ViewChild为一个使用ngx引导程序出现在网站每个页面上的模态做了类似的事情。如果你的聊天机器人窗口可以分配给一个模态，这应该可以正常工作。我正在使用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本地存储库来仅显示基于页面访问后的时间量的模式，等等。
<router-outlet><yourComponent></yourComponent></router-outlet>的其他方式适用于聊天机器人