CODEWITHSUNDEEP
angulartypescript
Optiq
Optiq

Reputation: 3182

How do you activate routes through a service in Angular?

I created an angular app where I have a "welcome page" component set as the default route so it's the first to pop up when a user comes to the site. Within that component I have links that need to activate the router-outlet in the app component. Seeing that the "welcome page component" is pulled in by the router outlet I figured I'd have to use a service to detect the link clicked and update the route in the app component because there's nothing explicit between the two components to pass it through otherwise.

I created a service file which looks like this

@Injectable()

export class RouteService{

    public clickedLink: Subject<string> = new Subject<string>();

    setLink(link: string){ this.clickedLink.next(link); }
}

I modified my "welcome page component" to look like this

export class WelcomePageComponent {

    constructor(private RS: RouteService ){}

    sendLink(link: string){ this.RS.setLink(link); }
}

then modified the links in the template to this

<a (click)="sendLink('/illustration')"></a>

then in the app component I have this

export class AppComponent implements OnInit {

    pageLink: string;

    constructor( private RS: RouteService, private router: Router ){}

    ngOnInit(){
       this.RS.clickedLink.subscribe(link => this.pageLink = link); 
    }

    pageNav(link:string){ this.router.navitgate(link); }
}

Now I'm stuck at figuring out how I should go about triggering the pageNav() function to update the route. I looked into @HostListener in terms of trying to listen to the pageLink variable and a little into observables but can't seem to find anything relevant to what I'm trying to achieve. Can anyone help with this?

UPDATE

my app.module looks like this

@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      BrowserModule,
      AppRoutingModule,
      PagesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The PagesModule is a module I started for my "page components" and that looks like this

@NgModule({
    imports: [ BrowserModule ],
    declarations: [
        WelcomePageComponent, IllustrationPageComponent
    ],
    exports: [
        WelcomePageComponent, IllustrationPageComponent
    ]
})

export class PagesModule{}

the AppRoutingModule looks like this

export const routes: Routes = [
    { path: '', redirectTo: '/welcome', pathMatch: 'full' },
    { path: 'welcome',      component: WelcomePageComponent },
    { path: 'illustration', component: IllustrationPageComponent }
]

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {}

Upvotes: 2

Views: 1546

Answers (2)

Gilsdav
Gilsdav

Reputation: 1155

You can resolve your problems by these steps:

  • Currently you already listen click by subscribing clickedLink. When link is clicked, you save the new link in "pageLink" but you can do more actions (call pageNav() for example).

    You will not need pageLink anymore if you directly call pageNav(link).

    this.RS.clickedLink.subscribe(link => { this.pageNav(link); });

  • Be sure you use singleton service for "RouterService". Have different instances of it will not allow you to emit events across components. To do that : provide the service only on parent module of your components. (remove it from your components providers list)

  • router.navigate() require an array therefore you can use it like this : this.router.navigate([link]);

Upvotes: 2

Abdelrhman Hussien
Abdelrhman Hussien

Reputation: 374

I am not sure If I am fully understanding your question but routing in angular is very easy to configure and implement. Just add routerLink directive to any element and it will update the router-outlet when it's clicked. here is an example 

<nav>
    <a routerLink="/dashboard">
       dashboard
    </a>
    <a routerLink="/path-to-another-component">
       new componenet
    </a>
</nav>

the router link directive call the angular routing service behind the scene, checking you router configurations find the component to be rendered and update the router-outlet.

There is no need for observable here. I hope that help you.

Upvotes: 0

Related Questions