我正在使用 Angular 5。我有一个简单的父组件和一个子组件。从父组件我将 searchTerm 传递给子组件。子组件使用 searchTerm 文本来搜索并在表格中显示结果。然而,一切正常。在搜索框中输入 searchTerm 后大约 15 秒后调用 ngOnChanges。控制台或网络中没有活动。我不确定为什么这么晚才调用 ngOnChanges。在 15 秒内调用后,搜索工作和结果显示速度非常快。在同一页面上,我使用 Web Socket 连接来显示通知。我尝试注释掉执行 Web 套接字连接的代码。但是,即使在那之后搜索也很慢。如果您有任何想法,请告诉我。
import { Component, TemplateRef, OnInit,Input,OnChanges, OnDestroy } from '@angular/core';
import { NgModule } from '@angular/core';
//import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
//import * as Query from '../global-query';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
//import { DataService } from '../core/data.service';
//import { Subscription } from 'rxjs/Subscription';
//import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { ServerResponse } from '../shared/interfaces';
import { Data , CategoryData } from '../shared/interfaces';
import { Category } from '../category';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { StompService } from 'ng2-stomp-service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-application',
templateUrl: './application.component.html',
styleUrls: ['./application.component.scss']
})
export class ApplicationComponent implements OnInit, OnChanges {
@Input() searchTerm: String;
modalRef: BsModalRef;
applications: Array<any> = []; // List of Applications
//applications: any;
application: any = {};
temp_app: any = {};
name: any;
owner: any;
app_status: any;
category: any;
stockQuote: number;
sub: Subscription;
categories: Array<any> = []; // List of Categories
subscription: Subscription = null;
connected = false;
greetings = new Array<string>();
notification: string;
errorMessage : string;
//baseUrlWebSocket: string = 'http://192.168.99.101:8090';
//baseUrl: string = 'http://192.168.99.101:5000';
baseUrlWebSocket: string = 'http://localhost:8090';
baseUrl: string = 'http://localhost:5000';
constructor(//private apollo: Apollo,
private modalService: BsModalService//,private dataService: DataService//) { }
,private http: HttpClient, private router: Router,// private route: ActivatedRoute,
private stomp: StompService) {
console.log('stomp configure');
//stomp.configure({host: 'http://localhost:8090/ws', queue: ''
stomp.configure({host: this.baseUrlWebSocket+'/ws', queue: ''
//debug:false,
//queue:{'init':false}
});
console.log('stomp configure complete');
}
ngOnInit() {
console.log('ngOnInit');
console.log('searchTerm');
console.log(this.searchTerm.toUpperCase());
this.getCategories('');
console.log(this.categories);
this.getApplications(this.searchTerm.toUpperCase());
/*this.sub = this.dataService.getQuotes()
.subscribe(quote => {
//console.log('quote');
//console.log(quote);
this.stockQuote = quote;
});*/
this.connect();
console.log('Connected to Web Socket');
}
ngOnChanges() {
// setTimeout(() => {
console.log('ngOnChanges');
console.log(this.searchTerm.toUpperCase());
//this.getCategories('');
this.getApplications(this.searchTerm.toUpperCase());
console.log('ngOnChanges complete');
//}, 0);
}
ngOnDestroy() {
//this.sub.unsubscribe();
console.log('disconnect');
this.disconnect();
console.log('disconnect complete');
}
connect() {
this.stomp.startConnect().then(() => {
this.connected = true;
console.log('connected');
// there appears to be a bug in stomp-service which means the promise is
// resolved before the connection state is properly changed
setTimeout(() => {
this.subscription =
this.stomp.subscribe('/topic/ads',
(data) => {
console.log(data);
this.notification = data.content;
}
);
}, 50);
console.log('subscribed');
});
}
disconnect() {
this.subscription.unsubscribe();
this.stomp.disconnect().then(() => {
console.log('disconnected');
this.connected = false;
});
}
sendName(name: string) {
this.stomp.send('/app/hello', {'name': name});
}
/**
* Create Application
* @param nameValue Name of Application
* @param ownerValue Owner of Application
* @param app_statusValue Status of Application
* @param categoryValue Category of Application
*/
createApplication(nameValue,ownerValue,app_statusValue,categoryValue) {
console.log('createApplication');
//console.log(this.application["name"] +" "+ this.application["owner"]+" "+this.application["app_status"]+" "+this.application["category"]);
this.temp_app["name"] = nameValue.toUpperCase();
this.temp_app["owner"] = ownerValue.toUpperCase();
this.temp_app["app_status"] = app_statusValue.toUpperCase();
console.log(categoryValue);
let categoryItem = this.categories.find(i => i.name == categoryValue);
console.log(this.categories.find(i => i.name == categoryValue));
var cat = new Category();
cat.id = categoryItem.id;
cat.name = categoryItem.name
var x: Category[] = [
cat
];
console.log(x);
this.temp_app["category"] = x;
//this.http.post<ServerResponse>('http://localhost:5000/api/app/',this.temp_app)
this.http.post<ServerResponse>(this.baseUrl+'/api/app/',this.temp_app)
.subscribe(res => {
//let id = res['id'];
console.log(res);
this.applications = (<Data>res.data).applications;
this.router.navigate(['/applications']);
//this.router.navigate(['/applications']);
this.closeFirstModal();
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* Remove Application
* @param id
*/
removeApplication(id) {
//this.http.delete<ServerResponse>('http://localhost:5000/api/app/'+id)
this.http.delete<ServerResponse>(this.baseUrl+'/api/app/'+id)
.subscribe(res => {
console.log(res);
this.applications = (<Data>res.data).applications;
this.router.navigate(['/applications']);
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* Edit Application Form
* @param application
* @param template
*/
showEditApplicationForm(application, template) {
this.errorMessage = '';
this.name = application.name;
this.owner = application.owner;
this.app_status = application.app_status;
this.category = application.category;
this.application = application;
this.modalRef = this.modalService.show(template);
}
/**
* Update Application
* @param nameValue Name of Application
* @param ownerValue Owner of Application
* @param app_statusValue Status of Application
* @param categoryValue Category of Application
*/
updateApplication(nameValue,ownerValue,app_statusValue,categoryValue) {
console.log(this.application.id);
console.log('updateApplication');
console.log(this.application);
console.log(nameValue,ownerValue,app_statusValue,categoryValue);
this.temp_app.id = this.application.id;
this.temp_app.name = nameValue.toUpperCase();
this.temp_app.owner = ownerValue.toUpperCase();
this.temp_app.app_status = app_statusValue.toUpperCase();
console.log(categoryValue);
let categoryItem = this.categories.find(i => i.name == categoryValue);
console.log(this.categories.find(i => i.name == categoryValue));
var cat = new Category();
cat.id = categoryItem.id;
cat.name = categoryItem.name;
var x: Category[] = [
cat
];
console.log(x);
this.temp_app["category"] = x;
//this.http.put<ServerResponse>('http://localhost:5000/api/app/'+this.application.id,this.temp_app)
this.http.put<ServerResponse>(this.baseUrl+'/api/app/'+this.application.id,this.temp_app)
.subscribe(data => {
//let id = res['id'];
console.log(data.data);
this.applications = (<Data>data.data).applications;
this.router.navigate(['/applications']);
this.closeFirstModal();
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* ----------------------------------------------------
* Get All Categories
* ----------------------------------------------------
* @method getCategories
*/
getCategories(searchTermValue) {
console.log('calling getCategories');
//this.http.get<ServerResponse>('http://localhost:5000/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
this.http.get<ServerResponse>(this.baseUrl+'/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
//console.log('data');
console.log(data.data);
this.categories = (<CategoryData>data.data).categories;
});
//console.log('data');
//console.log(this.applications);
}
/**
* ----------------------------------------------------
* Get All Applications
* ----------------------------------------------------
* @method getApplications
*/
getApplications(searchTermValue) {
console.log('calling getApplications');
//this.http.get<ServerResponse>('http://localhost:5000/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
this.http.get<ServerResponse>(this.baseUrl+'/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
//console.log('data');
console.log(data.data);
this.applications = (<Data>data.data).applications;
});
//console.log('data');
//console.log(this.applications);
}
// Open Modal
openModal(template: TemplateRef<any>) {
this.errorMessage = '';
this.name = '';
this.owner = '';
this.app_status = '';
this.category = '';
this.application = {};
this.modalRef = this.modalService.show(template);
}
// Close Modal
closeFirstModal() {
this.modalRef.hide();
this.modalRef = null;
}
}
import { Component, TemplateRef, OnInit,Input,OnChanges, OnDestroy } from '@angular/core';
import { NgModule } from '@angular/core';
//import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
//import * as Query from '../global-query';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
//import { DataService } from '../core/data.service';
//import { Subscription } from 'rxjs/Subscription';
//import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { ServerResponse } from '../shared/interfaces';
import { Data , CategoryData } from '../shared/interfaces';
import { Category } from '../category';
import { FormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { StompService } from 'ng2-stomp-service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-application',
templateUrl: './application.component.html',
styleUrls: ['./application.component.scss']
})
export class ApplicationComponent implements OnInit, OnChanges {
@Input() searchTerm: String;
modalRef: BsModalRef;
applications: Array<any> = []; // List of Applications
//applications: any;
application: any = {};
temp_app: any = {};
name: any;
owner: any;
app_status: any;
category: any;
stockQuote: number;
sub: Subscription;
categories: Array<any> = []; // List of Categories
subscription: Subscription = null;
connected = false;
greetings = new Array<string>();
notification: string;
errorMessage : string;
//baseUrlWebSocket: string = 'http://192.168.99.101:8090';
//baseUrl: string = 'http://192.168.99.101:5000';
baseUrlWebSocket: string = 'http://localhost:8090';
baseUrl: string = 'http://localhost:5000';
constructor(//private apollo: Apollo,
private modalService: BsModalService//,private dataService: DataService//) { }
,private http: HttpClient, private router: Router,// private route: ActivatedRoute,
private stomp: StompService) {
console.log('stomp configure');
//stomp.configure({host: 'http://localhost:8090/ws', queue: ''
stomp.configure({host: this.baseUrlWebSocket+'/ws', queue: ''
//debug:false,
//queue:{'init':false}
});
console.log('stomp configure complete');
}
ngOnInit() {
console.log('ngOnInit');
console.log('searchTerm');
console.log(this.searchTerm.toUpperCase());
this.getCategories('');
console.log(this.categories);
this.getApplications(this.searchTerm.toUpperCase());
/*this.sub = this.dataService.getQuotes()
.subscribe(quote => {
//console.log('quote');
//console.log(quote);
this.stockQuote = quote;
});*/
this.connect();
console.log('Connected to Web Socket');
}
ngOnChanges() {
// setTimeout(() => {
console.log('ngOnChanges');
console.log(this.searchTerm.toUpperCase());
//this.getCategories('');
this.getApplications(this.searchTerm.toUpperCase());
console.log('ngOnChanges complete');
//}, 0);
}
ngOnDestroy() {
//this.sub.unsubscribe();
console.log('disconnect');
this.disconnect();
console.log('disconnect complete');
}
connect() {
this.stomp.startConnect().then(() => {
this.connected = true;
console.log('connected');
// there appears to be a bug in stomp-service which means the promise is
// resolved before the connection state is properly changed
setTimeout(() => {
this.subscription =
this.stomp.subscribe('/topic/ads',
(data) => {
console.log(data);
this.notification = data.content;
}
);
}, 50);
console.log('subscribed');
});
}
disconnect() {
this.subscription.unsubscribe();
this.stomp.disconnect().then(() => {
console.log('disconnected');
this.connected = false;
});
}
sendName(name: string) {
this.stomp.send('/app/hello', {'name': name});
}
/**
* Create Application
* @param nameValue Name of Application
* @param ownerValue Owner of Application
* @param app_statusValue Status of Application
* @param categoryValue Category of Application
*/
createApplication(nameValue,ownerValue,app_statusValue,categoryValue) {
console.log('createApplication');
//console.log(this.application["name"] +" "+ this.application["owner"]+" "+this.application["app_status"]+" "+this.application["category"]);
this.temp_app["name"] = nameValue.toUpperCase();
this.temp_app["owner"] = ownerValue.toUpperCase();
this.temp_app["app_status"] = app_statusValue.toUpperCase();
console.log(categoryValue);
let categoryItem = this.categories.find(i => i.name == categoryValue);
console.log(this.categories.find(i => i.name == categoryValue));
var cat = new Category();
cat.id = categoryItem.id;
cat.name = categoryItem.name
var x: Category[] = [
cat
];
console.log(x);
this.temp_app["category"] = x;
//this.http.post<ServerResponse>('http://localhost:5000/api/app/',this.temp_app)
this.http.post<ServerResponse>(this.baseUrl+'/api/app/',this.temp_app)
.subscribe(res => {
//let id = res['id'];
console.log(res);
this.applications = (<Data>res.data).applications;
this.router.navigate(['/applications']);
//this.router.navigate(['/applications']);
this.closeFirstModal();
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* Remove Application
* @param id
*/
removeApplication(id) {
//this.http.delete<ServerResponse>('http://localhost:5000/api/app/'+id)
this.http.delete<ServerResponse>(this.baseUrl+'/api/app/'+id)
.subscribe(res => {
console.log(res);
this.applications = (<Data>res.data).applications;
this.router.navigate(['/applications']);
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* Edit Application Form
* @param application
* @param template
*/
showEditApplicationForm(application, template) {
this.errorMessage = '';
this.name = application.name;
this.owner = application.owner;
this.app_status = application.app_status;
this.category = application.category;
this.application = application;
this.modalRef = this.modalService.show(template);
}
/**
* Update Application
* @param nameValue Name of Application
* @param ownerValue Owner of Application
* @param app_statusValue Status of Application
* @param categoryValue Category of Application
*/
updateApplication(nameValue,ownerValue,app_statusValue,categoryValue) {
console.log(this.application.id);
console.log('updateApplication');
console.log(this.application);
console.log(nameValue,ownerValue,app_statusValue,categoryValue);
this.temp_app.id = this.application.id;
this.temp_app.name = nameValue.toUpperCase();
this.temp_app.owner = ownerValue.toUpperCase();
this.temp_app.app_status = app_statusValue.toUpperCase();
console.log(categoryValue);
let categoryItem = this.categories.find(i => i.name == categoryValue);
console.log(this.categories.find(i => i.name == categoryValue));
var cat = new Category();
cat.id = categoryItem.id;
cat.name = categoryItem.name;
var x: Category[] = [
cat
];
console.log(x);
this.temp_app["category"] = x;
//this.http.put<ServerResponse>('http://localhost:5000/api/app/'+this.application.id,this.temp_app)
this.http.put<ServerResponse>(this.baseUrl+'/api/app/'+this.application.id,this.temp_app)
.subscribe(data => {
//let id = res['id'];
console.log(data.data);
this.applications = (<Data>data.data).applications;
this.router.navigate(['/applications']);
this.closeFirstModal();
}, (err) => {
console.log(err.error.message);
this.errorMessage = err.error.message;
}
);
}
/**
* ----------------------------------------------------
* Get All Categories
* ----------------------------------------------------
* @method getCategories
*/
getCategories(searchTermValue) {
console.log('calling getCategories');
//this.http.get<ServerResponse>('http://localhost:5000/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
this.http.get<ServerResponse>(this.baseUrl+'/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
//console.log('data');
console.log(data.data);
this.categories = (<CategoryData>data.data).categories;
});
//console.log('data');
//console.log(this.applications);
}
/**
* ----------------------------------------------------
* Get All Applications
* ----------------------------------------------------
* @method getApplications
*/
getApplications(searchTermValue) {
console.log('calling getApplications');
//this.http.get<ServerResponse>('http://localhost:5000/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
this.http.get<ServerResponse>(this.baseUrl+'/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
//console.log('data');
console.log(data.data);
this.applications = (<Data>data.data).applications;
});
//console.log('data');
//console.log(this.applications);
}
// Open Modal
openModal(template: TemplateRef<any>) {
this.errorMessage = '';
this.name = '';
this.owner = '';
this.app_status = '';
this.category = '';
this.application = {};
this.modalRef = this.modalService.show(template);
}
// Close Modal
closeFirstModal() {
this.modalRef.hide();
this.modalRef = null;
}
}