Multiple components in router-outlet @input decorator not working

Question

I have a route in my router module /dashboard. In this route I have multiple components including a parent component and several child components. I pass data (tablesPanorama (Array of objects)) from the parent component called TischplanComponent (tischplan.component.ts) to a child component called DepartmentsComponent (departments.component.ts) with the @Input decorator.

app.module.ts

const appRoutes: Routes =  [
  {path: '', component: LoginComponent},
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', component: TischplanComponent, canActivate: [AuthGuard]},
  {path: 'register', component: RegisterComponent},
  {path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]}
];

imports: [RouterModule.forRoot(appRoutes)]

app-component-html

This is where the router-outlet lies

<router-outlet></router-outlet>

tischplan.component.html

 <app-departments [tablesPanorama]="tablesPanorama"</app-departments>

departments.component.ts

@Input('tablesPanorama') tablesPanorama: Table[];

Unfortunately the data is not passed to the child component. What causes this problem? If I console.log this.tablesPanorama in the constructor I get undefined:

  constructor(private tischplanService: TischplanService) {
    console.log("this.tablesPanorama:");
    console.log(this.tablesPanorama);
  }

The connection between the @Input and the <router-outlet>:

As far as I understand my code, the @Input is in the child component called DepartmentComponent which passes the variable tablesPanorama from the parent component TischplanComponent, which is the component of the /dashboard route in the <router-outlet>, which lies in the app.component.ts.

what actully you are trying to do , to pass the data to another component or you want to naviagte to another component — imdisney
just import that component in your component then create a object of it in the constructor , then using that object pass the data to that component — imdisney
@Input() is not supported on components added by the router. It's not clear how @Input() and <router-outlet> are related in your question. — Günter Zöchbauer

Luca Taccagni Luca Taccagni · Accepted Answer · 2018-02-02T14:21:25

first: change this line -->

@Input() tablesPanorama: Table[];

you are using @Input, not @Viewchild, you don't have to specify it.

Second: wait until view initialization ngAfterViewChecked to read your tablesPanorama var

Multiple components in router-outlet @input decorator not working

1 Answers