我在Angular中创建了一个搜索栏,我在使用侧栏导航组件。我希望搜索框位于顶部标题中,然后将结果显示在结果组件上,该组件将成为单独的页面。
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<img src="{{ logo }}" alt="Logo">
<span class="menuLabel">Menu</span>
<mat-nav-list>
<ul>
<li class="nav-item"><a mat-list-item class="nav-link" routerLink="home" routerLinkActive="active"><i class="fas fa-home"></i> Home</a></li>
<li class="nav-item"><a mat-list-item class="nav-link" routerLink="resources" routerLinkActive="active"><i class="fas fa-archive"></i> Resources</a></li>
<li class="nav-item"><a mat-list-item class="nav-link" href="#"><i class="fas fa-users"></i> Admin</a></li>
</ul>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar>
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<div class="row">
<div class="col-sm-4"><app-search></app-search></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><app-user></app-user></div>
</div>
</mat-toolbar>
<ng-content>
</ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
搜索组件:
<div class="results">
<mat-form-field class="example-full-width">
<input matInput placeholder="Search" [(ngModel)]="searchInput" name="search">
</mat-form-field>
<button mat-button (click)="onSearch(searchInput)" type="button"><i class="fas fa-arrow-right"></i></button>
如果它们在相同的组件上,将获得结果,但是我不知道如何将它们添加到不同的组件。
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
query: any;
searchInput: '';
searchReturned = false;
handleSuccess(data) {
this.query = data.results;
this.searchReturned = true;
}
constructor( private searchService: FetchDataService ) {}
ngOnInit() {
}
onSearch(query: string) {
return this.searchService.getSearch(query).subscribe(
data => this.handleSuccess(data),
error => console.log(error),
);
}
}