Question

我正在尝试在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。任何帮助表示赞赏

在Angular中隐藏聊天机器人对话框

0 个答案: