Jquery 在Angular中隐藏聊天机器人对话框
我正在尝试在一个角度应用程序中设计一个弹出式聊天机器人。现在我可以编写弹出对话框的代码，但在单击标题时无法隐藏它。我尝试使用角度动画以及Jquery，但“滑动切换”在Jquery中不适用于角度动画，因此我选择了角度动画 这是我对应的typescript代码Jquery 在Angular中隐藏聊天机器人对话框,jquery,angular,chatbot,Jquery,Angular,Chatbot,我正在尝试在一个角度应用程序中设计一个弹出式聊天机器人。现在我可以编写弹出对话框的代码，但在单击标题时无法隐藏它。我尝试使用角度动画以及Jquery，但“滑动切换”在Jquery中不适用于角度动画，因此我选择了角度动画 这是我对应的typescript代码 <p>chat-popup works!</p> <!DOCTYPE html> <html lang="en"> <head> <meta charset
<p>chat-popup works!</p>
<!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="visible" 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}
东南方
import { Component, OnInit } from '@angular/core';
import { ChatService, Message } from '../chat.service';
import { Observable } from 'rxjs';
import { scan } from 'rxjs/operators';
import { trigger, transition, style, animate } from '@angular/animations';
declare var jQuery: any;
@Component({
selector: 'app-chat-popup',
templateUrl: './chat-popup.component.html',
styleUrls: ['./chat-popup.component.scss'],
animations: [ trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])]
})
export class ChatPopupComponent implements OnInit {
messages: Observable<Message[]>;
formValue: string;
visible = true;
constructor(public chat: ChatService) { }
ngOnInit() {
console.log('Change detected');
this.messages = this.chat.conversation.asObservable().pipe(scan((acc, val) => acc.concat(val))
);
// tslint:disable-next-line:only-arrow-functions
(function($) {
// tslint:disable-next-line:only-arrow-functions
$(document).ready(function() {
// tslint:disable-next-line:only-arrow-functions
$('.chat_header').click(function() {
console.log('Inside click');
this.visible = false;
console.log(this.visible);
// $('.message_content').slideToggle('slow');
});
});
})(jQuery);
}
sendMessage() {
this.chat.converse(this.formValue);
this.formValue = '';
}
}
从'@angular/core'导入{Component，OnInit}；
从“../chat.service”导入{ChatService，Message}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{scan}；
从“@angular/animations”导入{trigger，transition，style，animate}；
声明var jQuery:any；
@组成部分({
选择器：“应用程序聊天弹出窗口”，
templateUrl:'./chat popup.component.html'，
样式URL:['./chat popup.component.scss']，
动画：[触发器（'slideInOut'[
转换（“：输入”[
样式（{transform:'translateY（-100%）'）}），
动画（'200ms缓进'，样式（{transform:'translateY（0%）}））
]),
过渡（“：离开”[
动画（'200ms缓进'，样式（{transform:'translateY（-100%）}））
])
])]
})
导出类ChatPopupComponent实现OnInit{
信息：可观察；
formValue：字符串；
可见=真实；
构造函数（公共聊天：聊天服务）{}
恩戈尼尼特（）{
console.log（“检测到更改”）；
this.messages=this.chat.conversation.asObservable（）.pipe（扫描（（acc，val）=>acc.concat（val））
);
//tslint：禁用下一行：仅箭头功能
（函数（$）{
//tslint：禁用下一行：仅箭头功能
$（文档）.ready（函数（）{
//tslint：禁用下一行：仅箭头功能
$（'.chat_header'）。单击（函数（）{
log（'insideclick'）；
可见=假；
console.log（this.visible）；
//$（'.message_content'）.slideToggle（'slow'）；
});
});
})（jQuery）；
}
sendMessage（）{
this.chat.converse（this.formValue）；
this.formValue=''；
}
}
click函数正在工作，它进入Jquery代码内部，但它没有隐藏我给出的
ngIf*可见