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

Question

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

问题: 我无法访问 app.component.ts from [=16= 中搜索字符串的值] ngOnInit 重新填充结果。我已经尝试了几乎所有我能想到的。

我已经构建了一项服务，但我不知道如何设置它来传达该价值（如果这是解决方案的话）。

更新代码

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

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

要使服务正常工作，您需要创建该服务，然后将其添加到您的应用程序模块中。然后在组件的构造函数中添加它，以便依赖注入可以为您将它添加到组件中。构造函数如下所示。

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 访问不同路由组件的输入值？

Angular 2 Access input value of a different routed component via ngOnInit?

angularjs

angular

angular2-routing

angular2-services