聊天頁面socket.io離子錯誤

Question

我的聊天頁面有小問題:)想要做一些聊天應用程序 我有登錄工作，但當我點擊按鈕聊天它崩潰。我是初學者，所以也許我看不到正確的。這是在離子3

Home.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> 

chat.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) { 

    } 
    } 
} 

chat.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會將頁面推送到當前導航堆棧。 根據您的要求使用其中之一。