Как добавить ионный компонент v3 в ионный контент, но поместить дочернюю кнопку компонента в нижний колонтитул

Question

Я создал несколько компонентов, которые обрабатывают функции отправки формы.В каждом из этих компонентов я хочу, чтобы кнопки отправки / отмены формы были зафиксированы в нижней части окна, как и функции, доступные через ion-footer.Кнопка отправки требует ссылки на переменные + методы в компоненте для функциональности [disabled] + (tap), например [disabled] = "! FormGroup.valid" (tap) = "submitForm ()"

Если компонент является дочерним по содержанию ионов, то нет никакого способа добавить ионный нижний колонтитул, поскольку он будет содержаться в ионном содержании, а не ниже ионного содержания.На первый взгляд, наличие ионного нижнего колонтитула внутри ионного содержимого выглядит правильно, но рендеринг может быть ошибочным, особенно в ситуациях прокрутки.Я зашел так далеко, что установил класс css с принудительным дном с фиксированным положением / дном, но похоже, что ионный javascript переопределяет фиксированное позиционирование внутри иона, поэтому чистое решение CSS кажется невозможным.

<ion-content> 
    <a-form-component>
    </a-form-component>
</ion-content>
<ion-footer>
  <!-- add a-form-component's button here -->
</ion-footer>

Любые рекомендации о том, как достичь желаемой функциональности?

TIA

Answer 1

Допустим, у вас есть страница с именем page и компонент с именем cp внутри page.html, у вас есть компонент <cp></cp>

Внутри cp.html у вас есть

<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
    <button>login<button>
</div>

внутри page.scss:

  #the-footer{

         background-color: #efefef;
         text-align: center;
         position: fixed;
         width: 100%;
         bottom: 0px;
         z-index: 99999;
  }

Это приведет к тому же результату, что и нижний колонтитул.

Элемент, содержащий кнопку, всегда будет виден независимо от прокрутки.

надеюсь, это поможет