Question

我的路线配置如下：

export const ProjectRoutes: Route[] = [
  {
    path: 'projects',
    component: ProjectComponent,
    canActivate: [ScrollTop, AuthGuard],
    data: {
      roles: [Role.USER]
    }
  },
  {
    path: 'project/:id',
    component: ProjectDetailsComponent,
    children: [
      {
        path: '',
        component: ProjectInfoComponent,
        canActivate: [ScrollTop, AuthGuard],
        data: {
          roles: [Role.USER]
        }
      },
      {
        path: 'tools',
        component: ProjectToolsComponent,
        canActivate: [ScrollTop, AuthGuard],
        data: {
          roles: [Role.USER]
        }
      }
    ]
  }
];

ProjectComponent的模板是：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <priz-project-nav [project]="project"></priz-project-nav>
    </div>
    <div class="col-md-10">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

现在，正如您所见，priz-project-nav需要一个项目来渲染导航，ProjectInfoComponent和ProjectToolsComponent也需要。

所以，我现在被迫做的是分别在每个组件中加载project对象，包括在父组件中。我的问题是，是否可以在组件之间传递一次加载的对象，而每个子组件都设置在它自己的路径下？

Answer 1

共享服务将是最佳选择：

@Injectable()
export class YourSharedService {
    sharedRole: {
        // your properties here... e.g
        name: 'string'
    };
}

并将构造函数中的服务注入需要访问共享对象（或其他）的所有组件

constructor(private yourSharedService: YourSharedService......) {  }

然后你可以在每个组件中访问它，如下所示：

localRole = this.yourSharedService.sharedRole;

并为其指定新值：

this.yourSharedService.sharedRole = localRole

和这哥特一起。如果您在某个组件中对其进行了更改，则使用此共享对象分配的所有组件都会自动更新该值。

以上是一种解决方案。当然还有其他解决方案，例如使用Observables。有关详细信息，请参阅angular doc - component interaction我强烈建议您查看其他问题的文档，我认为该教程非常好:)）

使用Angular2的分层路由时，将参数从父组件传递到子组件

1 个答案: