Angular 谷歌地图不适用于路由器插座答案

【问题标题】：Angular google maps not working with router-outletAngular 谷歌地图不适用于路由器插座
【发布时间】：2020-02-12 13:23:12
【问题描述】：

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

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

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

但不知何故，只有子组件中的地图加载。我已经复制了这种行为in this StackBlitz。

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

版本

@agm/核心1.0.0
角8.2.10

【问题讨论】：

标签： angular typescript agm-core

【解决方案1】：

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

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

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

【讨论】：

谢谢，这行得通！但是，如果我想要一个不使用布局组件作为其父级的路由怎么办？为什么我不能嵌套路由器插座？
可以嵌套路由器插座，但我认为很难正确处理。您需要以不同的方式构建模块和组件，而不是在 app.component 中使用 app-layout，您需要定义另一个组件，并让该组件处理哪些路由应该使用 app-layout 而不是。
嗯，有道理。如果我想要多种类型的父母，你能给我一个代码示例应该如何解决这个问题，所以并不总是将布局组件作为父母？
我可能会在你的 app.component 中有代码，读取当前 url（注入路由器，并订阅 navigationEnd-events），然后在布局组件上使用 *ngIf="displayLayout"，然后 *ngIf=!displayLayout" 在 router-outlet 上为 app.component 的模板。还有其他方法，最适合您的应用程序的方法取决于您。<app-layout *ngIf=".." /><router-outlet *ngIf="..." />
如果我向父路线添加语言参数，地图将不再加载。示例：stackblitz.com/edit/structure-map-module-component-mj4snr。如果您在 url 中添加一种语言，例如 /en，则 url 会按预期重写为 /en/home，但不再加载布局组件。你能告诉我我在这里缺少什么吗？