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

Posted 2023-02-23

【中文标题】Angular 2 与 <router-outlet> 组件通信

【英文标题】：Angular 2 Communicating with <router-outlet> components

【发布时间】：2017-03-28 21:15:50

【问题描述】：

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

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

搜索栏（输入文本字段），一旦按下回车，需要发送搜索字符串（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());
    

发现问题

Günter Zöchbauer 是正确的。我使用了一个带有 subscribe 和 observables 的服务来做到这一点。谢谢。

【问题讨论】：

angular.io/docs/ts/latest/cookbook/…

您能否更具体一些并在此处或 plunkr 中添加您的代码？这样会更好

我用代码更新了原帖。 Gunter 正在逃避使用服务，老实说，我不确定如何根据提供的链接集成我需要的东西......下面的人建议添加一个路由器事件侦听器。我不确定是哪个。希望有人能帮忙，谢谢。

我设法集成了一个服务，以便它将用户输入从主 app.component 传递到 course-listings 组件视图中的 searchStr 属性。我不明白的是，我如何调用显示结果所需的方法当订阅被调用（或者更确切地说，当执行新搜索时）。

我做到了！我意识到我必须将代码放在我之前的函数“searchStr”中，在构造函数的订阅中：this.subscription = this._interactionService.searchStr$.subscribe(//listings stuff here)

【参考方案1】：

在构造函数中需要event.subscriber 才能传递给路由器出口。 类似于Angular 2 router event listener 中的答案。

所以，一旦点击完成，订阅者事件将根据navigationend事件执行，然后可以访问该值。

【讨论】：

感谢您的评论。关于如何实现这一点仍然有点困惑。您能否用代码查看我更新的答案，以便我可以更具体地了解如何集成您的方法？谢谢。