Question

我的路由器模块/仪表板中有一条路线。在这条路线中，我有多个组件，包括父组件和几个子组件。我将数据（tablesPanorama（对象数组））从名为TischplanComponent（tischplan.component.ts）的父组件传递给带有@Input装饰器的名为DepartmentsComponent（departments.component.ts）的子组件。

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]}
];

导入：[RouterModule.forRoot（appRoutes）]

应用组分-HTML

这是路由器出口的地方

<router-outlet></router-outlet>

tischplan.component.html

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

departments.component.ts

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

不幸的是，数据未传递给子组件。是什么导致这个问题？如果我在构造函数中使用console.log this.tablesPanorama，我将得到未定义：

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

@Input与<router-outlet>之间的关联：

据我了解我的代码，@Input位于名为DepartmentComponent的子组件中，它从父组件TischplanComponent传递变量tablesPanorama，它是{{1}中/ dashboard路由的组件。 }，位于app.component.ts。

Answer 1

首先：更改此行 - ＆gt;

@Input() tablesPanorama: Table[];

您使用的是@Input，而不是@Viewchild，您无需指定它。

第二：等到视图初始化ngAfterViewChecked以读取tablesPanorama var

路由器插座@input装饰器中的多个组件无法正常工作

1 个答案: