聊天页面 socket.io 离子错误

Question

我的聊天页面有小问题 :) 想做一些聊天应用程序 我有登录，但当我点击按钮聊天时它崩溃了。我是初学者，所以也许我看不清楚。它在 Ionic 3 中

首页.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '@ionic/cloud-angular';
import { User } from '@ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController,  public auth: Auth, public user: User) {
    console.log(user);
  }

  logout() {
      this.auth.logout();
      this.navCtrl.setRoot(LoginPage);
    }

   about(){
      this.navCtrl.setRoot(About);
      this.navCtrl.push(About);
    }

    chat(){
      this.navCtrl.setRoot(ChatPage);
      this.navCtrl.push(ChatPage);
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logout()">
        <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome back, {{ user.details.name }}</h2>
  <p>
    <button ion-button color="secondary" block>Something</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="chatPage()">Chat</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="about()">About</button>
  </p>
</ion-content>

聊天.ts

import { Component, NgZone, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';
import { Validators, FormBuilder } from '@angular/forms';
import * as io from 'socket.io-client';

import { HomePage } from '../home/home';

@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html'
})

export class ChatPage {
  public chatForm: any;
  @ViewChild(Content) content: Content;
  messages:any = [];
  socketHost: string = "http://localhost:3000/";
  socket:any;
  chat:any;
  username:string;
  zone:any;

  chatField: any;

  constructor(public navCtrl: NavController, private fb: FormBuilder){
  this.socket = io.content(this.socketHost);
  this.zone = new NgZone({enableLongStackTrace: false});
  this.socket.on("chat me", (msg) =>{
    this.zone.run (() =>{
      this.messages.push(msg);
      this.content.scrollToBottom();
    });
  });
  this.chatForm = fb.group({
        'chatField': ['', Validators.compose([Validators.required])],
      });

  this.chatField = this.chatForm.controls['chatField'];
  }

  chatSend(v) {
    let data = {
      message: v.chatText,
      username: this.username
    }
    this.socket.emit('new message', data);
    this.chat = "";
  }
  onSubmit(value: string): void {
      if(this.chatForm.valid) {

  }
  }
}

聊天.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Chat</ion-title>
  </ion-navbar>
  <ion-input [(ngModel)] = "username" placeholder="Username">  </ion-input>
</ion-header>
<ion-content class="chat">
  <ion-list>
    <div *ngFor="let data of messages">
      <ion-item *ngIf="username === data.username" style="border-right: solid 5px red;">
        <p class="chat-text" item-left>
          <strong> {{data.username}}: </strong>
          {{data.message}}
        </p>
        <p class="chat-time" item-right>
          {{data.date | date:'dd/MM/yyyy'}}

        </p>
      </ion-item>

      <ion-item *ngIf="username !== data.username" style="border-right: solid 5px green;">
        <p class="chat-text" item-left>
          <strong> {{data.username}}: </strong>
          {{data.message}}
        </p>
        <p class="chat-time" item-right>
          {{data.date | date:'dd/MM/yyyy'}}

        </p>
      </ion-item>

      </div>
  </ion-list>
</ion-content>

<ion-footer>
  <form padding [formGroup]="chatForm" (ngSubmit)="onSubmit(chatForm.value)">
    <ion-item>
      <ion-input [(ngModel)]="chatField" name="chatText" required placeholder="type here....."></ion-input>
    </ion-item>
    <br/><br/>
    <button type="submit" ion-button [disabled]="!chatForm.valid" block>Send</button>
  </form>
</ion-footer>

我得到的错误是

Runtime Error
co.chatPage is not a function
Stack
TypeError: co.chatPage is not a function
    at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:290:24)
    at handleEvent (http://localhost:8100/build/main.js:12302:138)
    at callWithDebugContext (http://localhost:8100/build/main.js:13510:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:13098:12)
    at dispatchEvent (http://localhost:8100/build/main.js:9277:21)
    at http://localhost:8100/build/main.js:9867:38
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/main.js:35897:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4613:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)
    at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:13213)
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) App

Answer 1

问题是您在模板中调用了(click)="chatPage()"，而您的HomePage.ts 中的函数是chat()。

做：

<button ion-button color="secondary" block (click)="chat()">Chat</button>

旁注：

您不必同时使用push 和setRoot。

setRoot 将创建一个新的导航堆栈并将特定页面设置为 Root。 push 会将页面推送到当前导航堆栈。 根据您的要求使用其中之一。