0
私はヘッダーコンポーネントに検索バーを持っています。角2 <router-outlet>コンポーネントと通信する
その下に、私は同じコンポーネント内に「ルータ出口」を持っています。
検索バー（入力txtフィールド）は、一度入力を押すと、検索文字列（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は
ギュンターZöchbauerが正しかったFOUND。私は購読と観測可能なサービスを使ってそれをやりました。ありがとう。
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –
具体的なコードをここに追加するか、plunkrで追加できますか？それはより良いでしょう –
私は元のポストをコードで更新しました。 Gunterはサービスを利用することを躊躇しています。正直なところ、提供されたリンクに基づいて必要なものをどのように統合するのかは正確にはわかりません...そして、以下の個人はルータイベントリスナーを追加することを提案しています。どちらが分からないのか分かりません。うまくいけば誰かが助けてくれるはずです。 –