Question

我在标题组件中有一个搜索栏。

在那之下，我在同一个组件中有一个“路由器插座”。

搜索栏（输入txtfield），一旦按下输入，需要将搜索字符串（event.target.value）发送到位于其下方路由器插座内的组件，以便它可以运行一个方法来返回结果。

我不知道实现这一目标的最佳方法是什么。

使用代码更新

app.component.html:

<div class="white-container">
     <input name="searchStr" [(ngModel)]="searchStr" (keyup.enter)="searchCourse($event)">
</div>

<router-outlet></router-outlet>

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { CourseService } from './services/courses.service';
import { Course } from './Course';

@Component({ 
   selector: 'my-app',
   templateUrl: 'app.component.html',
   providers: [CourseService]
})

export class AppComponent implements OnInit { 

    constructor(private _courseService: CourseService) {

    }

    searchCourse(event) {
       // the user search string here...
    }

}

/course-listings/course-listings.component.ts:

import { Component, OnInit } from '@angular/core';
import { CourseService } from './services/courses.service';
import { Course } from './Course';

@Component({ 
  selector: 'app-course-listings',
  templateUrl: './course-listings.component.html',
  styleUrls: ['./course-listings.component.css'],
  providers: [CourseService]
})

export class AppComponent implements OnInit { 

    course: Course[];

    constructor(private _courseService: CourseService) {

    }


    searchCourse(evt) {

        // This works once it's fired... 

        this._courseService.findCourse(evt)
            .subscribe(courses => { 
                this.course = courses; 
        });

    }


}

/services/courses.service.ts:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class CourseService {


    constructor(private _http:Http) {

    }

    getCourses(search) {
        return this._http.get('/api/v1/courses/'+search)
            .map(res => res.json());
    }

}

FIX FOUND

GünterZöchbauer是对的。我使用了带有subscribe和obserservable的服务来完成它。感谢。

Answer 1

构造函数中需要navigationend才能传递给router-outlet。与此Angular 2 router event listener中的答案类似。

因此，一旦点击完成，将根据function getfield($get){ global $connection; session_start(); $query = "SELECT id, username, firstname, lastname FROM users WHERE username='".$_SESSION['user_id']."'"; if ($query_r = mysqli_query($connection, $query)) { $num_rows = ($query_r -> num_rows); if ($mysqli_result = mysqli_fetch_assoc($query_r)) { return $mysqli_result; } }事件执行订阅者事件，然后可以访问该值。

Angular 2与<router-outlet>组件通信

1 个答案: