小贝子编程

Angular5: ngOnChanges 被称为相当慢



我正在使用Angular 5。我有一个简单的父组件和一个子组件。从父组件，我将搜索词传递给子组件。子组件使用 searchTerm 文本在表中搜索和显示结果。然而，一切正常。在搜索框中输入搜索词大约 15 秒后，将调用 ngOnChanges。控制台或网络中没有活动。我不知道为什么ngOnChanges这么晚才被调用。在 15 秒内调用后，搜索工作并快速显示结果。 在同一页面上，我正在使用Web套接字连接来显示通知。我尝试注释掉执行 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;
}

}

只是想更新这个问题，以便闭环。我能够使用以下代码解决问题-

<div class="row">
<div class="col1" >
<a href="applications" class="navbar-brand">Applications List</a>
</div>
<div class="col2">
<!--<nav class="navbar navbar-dark bg-primary"> -->
<div class="form-inline my-2 my-lg-0" style="padding-right: 10px;">
<input class="form-control" (keyup)="term=searchInput.value" type="search" placeholder="Search" aria-label="Search" #searchInput>
</div>
</div>
</div>
<!-- </nav>-->
<app-application [searchTerm]="term"></app-application>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium