Я создаю приложение, которое имеет Angular Google Maps и кнопку, которая загружается в компонент root следующим образом:
app.component. html
<div #mapContainer id="map"></div>
<a [routerLink]="['/calculation']"><button type="button" class="btn btn-outline-light btn-lg">Calculate</button></a>
<router-outlet></router-outlet>
app.component. css
#map {
top:0; left:0;
position:absolute;
height: 100%;
width: 100%;
margin: 0; padding:0;
}
У кнопки есть маршрут к / расчет, который при нажатии приводит пользователя к новый компонент. Angular Карты Google занимают все пространство страницы, используя position: absolute. Однако когда я нажимаю кнопку «Рассчитать», новый компонент загружается, но за картами Google (маршрутизация работает правильно), делая его невидимым для пользователя.
Компонент, к которому я пытаюсь направить, не имеет css, а html - это просто текст. Есть ли в этой ситуации простой способ загрузить компонент поверх карт Google?