Вставка html-файла из другого компонента без создания нового контейнера DOM в Ionic 4

Question

Я пытаюсь создать повторно используемый компонент Floating Action Button, но он не фиксирует его положение на экране, когда я вызываю его селектор в другом файле.

Это веб-сайт, созданный с использованием Angular иIonic 4, я попытался проверить в Google Chrome, и в рамках моего понимания это проблема:

https://imgur.com/a/rezFYxC https://imgur.com/a/vdyXlHN

Подсвеченная кнопка является проблематичнойнижняя правая кнопка работает отлично. Если вы внимательно посмотрите на элемент проверки, он показывает, что кнопка находится внутри контейнера «app-плавающая кнопка», который является селектором для моего плавающего компонента кнопки.

<!--main.page.html-->
<ion-content>
  <!--working sticky button-->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>
  <!--Text area-->
  <ion-text>
    text here
  </ion-text>
  <!--imported component-->
  <app-floating-button></app-floating-button>
</ion-content>

<!--floating-button.component.html-->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button>
    <ion-icon name="arrow-dropleft"></ion-icon>
  </ion-fab-button>
</ion-fab>

//floating-button.component.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-floating-button',
  templateUrl: './floating-button.component.html',
  styleUrls: ['./floating-button.component.scss'],
})
export class FloatingButtonComponent implements OnInit {
  @Input() position: String;
  @Input() link: String;
  constructor() { }

  ngOnInit() {}

}

Я ожидаю, что импортированный компонент будет работать точно так же, как «рабочая залипающая кнопка», у меня закончились идеи поместить содержимое плавающего-button.component.html в main.html, не помещая его в контейнер «app-плавающая кнопка»

ps недостаточно репутации для публикации изображений извините: (