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