Question

我在app.component.ts中有一个有输入值的搜索栏。
results.component.ts嵌入了app.component.html
当results.component.ts是当前激活的路线时，搜索工作正常，结果也是如此。
但是，如果有人点击了某个结果，results.component.ts会被另一个组件视图detail.component.ts替换（它会向他们提供有关结果的更多信息。）
在detail.component.ts上，我有一个“返回结果”链接设置routerLink='/'。请注意，搜索栏中仍然存在搜索查询，因为该视图永远不会被替换。
点击此后退按钮后，results.component.ts会重新加载并触发ngOnInit。

问题：我无法从<{strong> app.component.ts ngOnInit访问results.component.ts 中的搜索字符串值，以重新填充结果。我已经尝试了几乎所有我能想到的东西。

我已经建立了一个服务，但我不知道如何设置它以传达该值，如果这是解决方案。

已更新为代码

app.component.html

//other html <input placeholder="What do you want to learn?" name="searchStr" [(ngModel)]="searchStr" (keyup.enter)="searchCourse($event)">

相互作用-service.service.ts ：

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class InteractionService { // Observable string sources private searchStr = new Subject<string>(); // Observable string streams searchStr$ = this.searchStr.asObservable(); sendString(searchString: string) { this.searchStr.next(searchString); } }

app.component.ts ：

//other imports import {InteractionService} from './interaction-service.service'; @Component({ selector: 'my-app', templateUrl: 'app.component.html', providers: [CourseService, InteractionService] }) export class AppComponent implements OnInit { searchStr: string; constructor(private _courseService: CourseService, private _interactionService: InteractionService, private router: Router) { } ngOnInit() { } searchCourse(event) { this._interactionService.sendString(event.target.value); this.router.navigateByUrl('/'); } }

course-listings.component.ts （我将此称为上述结果）

// other imports import {Subscription} from 'rxjs'; import {InteractionService} from '../interaction-service.service'; @Component({ selector: 'app-course-listings', templateUrl: './course-listings.component.html', providers: [CourseService], }) export class CourseListingsComponent implements OnInit { //some other properties defined @Input() searchStr: string; subscription: Subscription; constructor(private _courseService: CourseService, private _interactionService: InteractionService) { this.subscription = this._interactionService.searchStr$.subscribe( courses => { this.searchStr = courses; // code for returning results here.. } ); } ngOnInit() { } }

Answer 1

您想要使用服务的权利。服务是单件，因此设置在一个组件中并从另一个组件获取将返回传递的值。

要使服务正常工作，您需要创建服务，然后将其添加到您的应用模块。然后在组件的构造函数中添加它，以便依赖项注入可以将它添加到组件中。构造函数看起来像这样。

constructor( private router: Router){}

每个组件的构造函数都应该有一个引用，并且服务单例是共享的。

<强>相互作用-service.service.ts：

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';


@Injectable()
export class InteractionService {
    sharedString = "";
}

<强> app.component.ts：

import {InteractionService} from './interaction-service.service';

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

export class AppComponent implements OnInit { 

constructor(private _courseService: CourseService, private     _interactionService: InteractionService, private router: Router) {

    }

ngOnInit() {
    this.__interactionService.sharedString = "Some value";
}

searchCourse(event) {
    this._interactionService.sendString(event.target.value);
    this.router.navigateByUrl('/');
}

}

我要把剩下的代码留下来。上面的例子应该足够了。只需使注入的交互服务可用，并设置并随意获取值。在存在浏览器上下文更改之前，服务值将一直存在。我想提到的最后一件事是路由调用这样的路由器

this.router.navigate(["url", someParam]);

这将保留上下文，并且在组件之间移动时不会导致浏览器上下文切换。

Angular 2通过ngOnInit访问不同路由组件的输入值？

1 个答案: