我正在尝试在Angular应用程序中设计一个弹出聊天机器人。现在，我可以对弹出对话框进行编码，但是单击标题时无法将其隐藏。我正在尝试同时使用Angular动画和Jquery，但“滑动切换”在jQuery的Angular中不起作用，因此我选择了Angular动画。
这是我对应的打字稿代码
<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>
这是我对应的类型脚本代码
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 = '';
}
}
click函数正在运行，它位于Jquery代码内部，但没有隐藏我给ngIf*所在的div。任何帮助表示赞赏