Вложенные угловые компоненты карт Google не отображаются

Прежде всего, если вы работаете в экосистеме Angular, я бы порекомендовал вам использовать ng-content и изучить все его возможности. Тег Slot предназначен для проецирования содержимого в тег шаблона HTML5, функциональность такая же, но если вы работаете с Angular, используйте ng-content, поскольку он более мощный и универсальный.

Сказал, что я смотрел ваш stackblitz, он говорит, что это Нет поставщика для MarkerManager. Это означает, что при создании AgmsMarkers поставщик MarkerManager не создается.

Я немного поискал и увидел, что таким образом вы составляете компоненты с помощью v-map и v-map-plots, порядок создания следующий:

1- v-map
   2- v-map-plots
      3- agm-marker
4- agm-map

Angular сначала создает проецируемый контент на v-map, поэтому AgmMarker создается до AgmMap. По этой причине у MarkerManager нет поставщика, поскольку он создается компонентом AgmMap.

В этой ситуации я бы просто не оборачивал agm-map. Я думаю, это не повлияет на то, что вы пытаетесь сделать, поскольку вы можете составлять столько компонентов внутри, сколько хотите, например:

<agm-map flex [latitude]="lat" [longitude]="lng">
    <v-map-plots></v-map-plots>
</agm-map> 

Я сделал вилку вашего stackblitz, показывая это: https://stackblitz.com/edit/angular-7-master-7jvsjr

Надеюсь это поможет!

Как уже описано в другом ответе, проблема в том, что дизайн библиотеки AGM таков, что она не работает с проекцией контента. Когда вы используете его в своем случае, элементы содержимого создаются до компонента, который их обертывает, что не работает в этом случае, потому что сначала создаются agm-marker-elements, и им нужны службы из компонента agm-map, который еще не был создан. Он создается после того, как контент был подготовлен.

Я предлагаю другое обходное решение, позволяющее сохранить ваш дизайн. Для этого решения вы измените компонент v-map-plots на директиву, чтобы он не отображался. Это означает, что вам не нужна проекция контента, а вместо этого просто получите все директивы v-map-plots, используя декоратор @ContentChildren внутри компонента v-map. Затем визуализируйте и agm-map, и agm-markers в компоненте v-map, используя данные из директив.

Вот как это будет выглядеть:

@Directive({
  selector: "v-map-plots"
})
export class VMapPlotsDirective {
  plots: IPlot[] = [];

  constructor(@Host() @Inject(forwardRef(() => VMapComponent)) private parent: VMapComponent) {

    this.plots.push({ Latitude: 51.678418, Longitude: 7.809007 })
    console.log("yo", this.plots);
  }
}

@Component({
  selector: "v-map",
  template: `<agm-map flex [latitude]="lat" [longitude]="lng">
              <ng-container *ngFor="let vMapPlotsDirective of vMapPlotsDirectives">
                <agm-marker *ngFor="let plot of vMapPlotsDirective.plots" [latitude]="plot.Latitude" [longitude]="plot.Longitude"></agm-marker>
              </ng-container>
            </agm-map>`
})
export class VMapComponent {
  lat: number = 51.678418;
  lng: number = 7.809007;
  @ContentChildren(VMapPlotsDirective) vMapPlotsDirectives;

  constructor(private loader: MapsAPILoader) {
  }
}

Вот реализация этого в StackBlitz так что вы можете увидеть это в действии.