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

Question

I have a search bar in app.component.ts that has an input value.
results.component.ts is embedded with a router-outlet in app.component.html
When results.component.ts is the current activated route, the search works fine and so do the results.
However, if someone clicks on a result, results.component.ts is replaced with a different component view detail.component.ts (it provides them with more information about the result.)
On detail.component.ts I have a "back to results" link setup with a routerLink='/'. And mind you, the search query is still present in the search bar because that view never gets replaced.
When this back button is clicked, results.component.ts reloads and fires ngOnInit.

The problem: I can't access the value of the search string in app.component.ts from results.component.ts ngOnInit to repopulate the results. I've tried almost everything I can think of.

I already have a service built, but I don't know how to set it up to communicate that value, if that is the solution.

Updated with code

app.component.html

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

interaction-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 (I referred to this as results above)

// 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() {

    }


}

The value is not accessible. The problem cannot reproduce.

Roman C
– Roman C

2016-11-16 23:07:43 +00:00
Commented Nov 16, 2016 at 23:07 — Roman C
– Roman C, Commented Nov 16, 2016 at 23:07

Lockless · Accepted Answer · 2016-11-17 00:17:39Z

1

Your right that you want to use a service. Services are singletons so setting in one component and getting from another will return the passed value.

To get a service to work you need to create the service then add it to your app module. Then in the constructor for your component you add it so the dependency injection can add it to the component for you. The constructor looks like this.

constructor( private router: Router){}

Each component should have a reference in its constructor and the service singleton is shared.

interaction-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('/');
}

}

I'm going to leave the rest of the code out. The above example should be enough. Simply make the injected interaction service available and set and get the values at will. The service values will persist until there is a browser context change. Last thing I want to mention is when routing call the router like this

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

this will preserve context and not cause a browser context switch when moving between components.

edited Nov 17, 2016 at 0:17

answered Nov 16, 2016 at 23:11

Lockless

4971 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Simon Over a year ago

Okay great, that's what I thought. I updated the original post with my basic coding structure. Could you elude to how I would share that <input value through the service? Thanks a lot.

Gary Simon Over a year ago

Thanks man! Got it to work by sticking your suggestion from ngOnInit() to searchCourse(event) (the method called when a search is performed).

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related