Angular2/5 搜索数据库并在新页面上显示结果

Question

我已经用 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);

Answer 1

创建一个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}`)
}

Angular2/5 搜索数据库并在新页面上显示结果

Angular2/5 search a database and display results on new page

angular

mean-stack

mlab