时间戳

首页 > 解决方案 > Angular 谷歌地图不适用于路由器插座

angular - Angular 谷歌地图不适用于路由器插座

问题描述

我正在创建一个应用程序，其中一个地图作为标题（全局视图），另一个地图位于页面中间，代表一些详细视图。我在这个 StackBlitz 中得到了这个工作。

现在为了最大程度地减少代码重复，我想将标题映射移动到父组件，这样我就可以在多个页面中重用全局映射标题。我可以通过 Angular 路由器（children标签）来做到这一点。这意味着以下内容：

LayoutComponent (global view map) --> <router-outlet> --> HomeComponent (detail view map)

但不知何故，只有子组件中的地图加载。我在这个 StackBlitz中重现了这种行为。

现在我想知道，我在这里做错了吗？我似乎找不到任何为什么这段代码不应该工作的原因。

版本

标签： angulartypescriptagm-core

解决方案

看来你有一些结构问题。在您的 FeatureModule 中，您加载 HomeModule，并渲染 LayoutComponent。<router-outlet>AppComponent 和 LayoutComponent 中也都有。您还需要在它们各自的模块中导出某些组件，以便在其他模块中使用它们。

我做了一些结构更改，FeatureModule 加载 HomeComponent。appComponent 现在使用<app-layout>-template，布局模板会根据其路径渲染正确的组件，也就是空路径的 HomeComponent。现在，您有两个地图，并且标题将保留为您加载的所有不同组件。

这是解决您遇到的困难的尝试：Stackblitz

推荐阅读