Angular 2 Passing Data to Routes

Question

I am working on this angular2 project in which I am using ROUTER DIRECTIVES to navigate from one component to other   There are 2 components  i e  PagesComponent  amp  DesignerComponent   I want to navigate from PagesComponent to DesignerComponent   So far its routing correctly but I needed to pass page Object so designer can load that page object in itself   I tried using RouteParams But its getting page object undefined   below is my code   pages component ts  import  Component  OnInit  Input  from  angular2 core   import   GlobalObjectsService  from          shared services global global objects service   import   ROUTER DIRECTIVES  RouteConfig   from  angular2 router   import   DesignerComponent   from          designer designer component   import  RouteParams  from  angular2 router     Component       selector   pages           directives  ROUTER DIRECTIVES        templateUrl   app project-manager pages pages component html      RouteConfig       path      name   Designer  component  DesignerComponent             export class PagesComponent implements OnInit    Input   pages any  public selectedWorkspace any      constructor private globalObjectsService GlobalObjectsService        this selectedWorkspace this globalObjectsService selectedWorkspace                        ngOnInit              In the html  I am doing following    lt scrollable height  300  class  list-group  style  overflow-y  auto  width  auto  height  200px    ngFor   page of pages  gt        page name   lt a  routerLink     Designer   page  page    title  Page Designer  gt  lt i class  fa fa-edit  gt  lt  i gt  lt  a gt   lt  scrollable gt    In the DesignerComponent constructor I have done the following   constructor params  RouteParams        this page   params get  page        console log this page    undefined     So far its routing correctly to designer  but when I am trying to access page Object in designer then its showing undefined  Any solutions

User · Accepted Answer

You can t pass objects using router params  only strings because it needs to be reflected in the URL  It would be probably a better approach to use a shared service to pass data around between routed components anyway   The old router allows to pass data but the new  RC 1  router doesn t yet   Update  data was re-introduced in RC 4 How do I pass data in Angular 2 components while using Routing

User · Answer

1  Set up your routes to accept data        path   some-route       loadChildren              gt  import             some-component some-component module          then          m   gt  m SomeComponentModule              data          key   value                        2  Navigate to route   From HTML    lt a  routerLink     some-component     key   value         gt       lt  a gt    Or from Typescript   import  Router  from   angular router          this router navigate                 some-component                      key   value                                      3  Get data from route  import  ActivatedRoute  from   angular router         this value   this route snapshot params  key

User · Answer

It changes in angular 2 1 0  In something module ts  import   NgModule   from   angular core   import   CommonModule   from   angular common   import   BlogComponent   from    blog component   import   AddComponent   from    add add component   import   EditComponent   from    edit edit component   import   RouterModule   from   angular router   import   MaterialModule   from   angular material   import   FormsModule   from   angular forms   const routes             path          component  BlogComponent              path   add       component  AddComponent              path   edit  id       component  EditComponent      data          type   edit                 NgModule     imports        CommonModule      RouterModule forChild routes       MaterialModule forRoot        FormsModule        declarations   BlogComponent  EditComponent  AddComponent     export class BlogModule       To get the data or params in edit component  import   Component  OnInit   from   angular core   import   Router  ActivatedRoute  Params  Data   from   angular router    Component     selector   app-edit     templateUrl     edit component html     styleUrls      edit component css      export class EditComponent implements OnInit     constructor      private route  ActivatedRoute      private router  Router            ngOnInit          this route snapshot params  id        this route snapshot data  type

User · Answer

You can do this   app-routing-modules ts   import   NgModule                       from   angular core   import   RouterModule  Routes           from   angular router   import   PowerBoosterComponent          from    component power-booster component     export const routes  Routes         path    pipeexamples  component  PowerBoosterComponent   data    name  shubham                   NgModule         imports    RouterModule forRoot routes           exports    RouterModule              export class AppRoutingModule      In this above route  I want to send data via a pipeexamples path to PowerBoosterComponent So now I can receive this data in PowerBoosterComponent like this   power-booster-component ts  import   Component  OnInit   from   angular core   import   Router  ActivatedRoute  Params  Data   from   angular router     Component     selector   power-booster     template         lt h2 gt Power Booster lt  h2 gt       export class PowerBoosterComponent implements OnInit     constructor      private route  ActivatedRoute      private router  Router            ngOnInit           this route snapshot data  name       console log  Data via params    this route snapshot data  name             So you can get the data by this route snapshot data  name

[javascript] Angular 2: Passing Data to Routes?

Examples related to javascript

Examples related to typescript

Examples related to angular

Examples related to angular2-routing