我用 express 设置了 MLABS 并且它可以很好地连接到数据库，然后我有一个 angular2 服务，当单击按钮为 MLAB 执行 GET 时，该服务可以联系 expressjs。这是我感到困惑的部分，当单击按钮时，希望 angular2 移动到新组件（页面）以显示搜索结果并获取 GET 的结果并将它们显示在那里。按钮和 GET 是由作为导航栏的 app.component 完成的，所以我在应用程序中的位置无关紧要，我应该能够在顶部的搜索栏中输入一个字符串，它会将我带到一个页面单击导航栏上的搜索图标后的结果。
我在应用顶部的搜索栏：
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
路由模型：
const appRoutes: Routes = [
{
path: '',
component: WelcomeComponent
},
{
path:'home',
component: HomeComponent
},
{
path:'profile',
component: ProfileComponent
},
{
path: 'request',
component: RequestComponent
},
{
path: 'mapsmenu',
component: MapsMenuComponent
},
{
path: 'activity',
component: TransactionsComponent
},
{
path: 'poststatus',
component: PostStatusComponent
},
{
path: 'map',
component: CryptoMapComponent
},
{
path: 'trading',
component: tradingComponent
},
{
path: 'friends',
component: FriendsComponent
},
{
path: 'linkwallet',
component: WalletComponent
},
{
path: 'newwallet',
component: NewWalletComponent
},
{
path: 'settings',
component: SettingsComponent
},
{
path: 'register',
component: RegisterComponent
},
{
path: 'FAQ',
component: FAQComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
创建一个SearchResultComponent并将其添加到路由模块：
constructor(private route:ActivatedRoute){}
ngOnInit(){
this.route.queryParams.debounceTime(500).distinctUntilChanged().subscribe(params =>{
// perform search here and bind result to template only after the input has changed and 500ms have passed
})
}
在您的搜索栏中：
<input #search type="text" class="form-control" placeholder="Search" name="q">
<button class="btn btn-default" type="submit" (click)="goToSearch(search.value)"><i class="glyphicon glyphicon-search"></i></button>
在您的搜索栏组件中
goToSearch(search:string){
this.router.navigateByUrl(`/search?${search}`)
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句