我正在开发一个包含搜索功能的应用程序。
现在我有2个组件正在应用中 1.导航栏 2. SearchGridList
导航栏组件包含一个文本框,您可以在其中输入搜索查询并按Enter键,该组件将进行api调用并获取数据。 当数据返回时,我想将此数据填充到SearchGridList组件的数组中。
我很难理解在Angular中如何在组件内传递数据,有人可以看看我的代码并为我提供指导。
navbar.component.ts
import { Component, OnInit, Input, Output } from '@angular/core';
import {DataService} from '../../services/data.service';
import {SearchResults} from '../class/search.class';
import {SearchGridListComponent} from '../search-grid-list/search-grid-list.component';
import { EventEmitter } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
searchQuery : String;
//searchResultList : Array<any> = [];
constructor(private dataService : DataService) { }
doSearch () : any
{
this.dataService.doSQLSearch(this.searchQuery)
.then ((data:any)=>{
for (var i =0; i<data.Results.length;i++){
let searchObj = new SearchResults(data.Results[i]);
//I want to push data into array from SearchGrid like this
resultGridList.push(searchObj);
}
});
}
ngOnInit() {
}
}
navbar.component.html
<mat-toolbar class="main-header">
<a href="/">
<img src="../../../assets/vms-header-logo.png" id= "header-logo">
</a>
<form class="search-box">
<mat-form-field class="search-box-full-width">
<input id ="search-textbox" matInput placeholder="Enter a Barcode, DSID or any search term" name="Search" [(ngModel)]="searchQuery" (keyup.enter)="doSearch()" autocomplete="off">
</mat-form-field>
</form>
</mat-toolbar>
search-grid.component.ts
import { Component, OnInit, Input } from '@angular/core';
import {NavbarComponent} from '../navbar/navbar.component';
@Component({
selector: 'app-search-grid-list',
templateUrl: './search-grid-list.component.html',
styleUrls: ['./search-grid-list.component.css'],
})
export class SearchGridListComponent implements OnInit {
resultGridList : Array <any> = [];
constructor() { }
ngOnInit() {
}
}
答案 0 :(得分:2)
您可以在BehaviorSubject
中创建一个DataService
private messageSource = new BehaviorSubject<string>('service');
您可以参考此演示在组件之间传递数据。
答案 1 :(得分:0)
您需要在@Output
事件之后添加到导航栏:
export class NavbarComponent implements OnInit {
...
@Output() public found = new EventEmitter<any>();
...
doSearch () : any
{
this.dataService.doSQLSearch(this.searchQuery) .then ((data:any)=>{
for (var i =0; i<data.Results.length;i++){
let searchObj = new SearchResults(data.Results[i]);
this.found.emit(searchObj); // !!!! here emit event
// however emitting events in loop looks strange... better is to emit one evet
}
});
}
...
}
网格组件中的确定使用@Input
作为resultGridList
参数
export class SearchGridListComponent implements OnInit {
@Input() public resultGridList : Array <any> = [];
...
}
好,现在在您的App组件中,可以通过以下方式将这两者结合起来
应用模板html:
<app-navbar (found)="handleResults($event)"></app-navbar>
<app-search-grid-list [resultGridList]="data"></app-search-grid-list>
在App ts文件中:
data = [];
...
handleResults(searchObj) {
this.data = searchObj
}
答案 2 :(得分:0)
也只需将dataService
注入search-grid
组件中。服务是单例,您可以在组件之间共享它们。
在一个组成部分中:
dataService.test = "hello";
在另一个组件中:
console.log(dataService.test); // "hello"
这就是服务的目的。
答案 3 :(得分:0)
@Input
用于定义输入属性,以实现component property binding
。 @Inoput装饰器用于将数据(属性绑定)从父组件传递到子组件。
组件属性应使用@Input
装饰器进行注释,以用作输入属性。