Какой способ добавления плавающей кнопки в приложение Angular (5) является предпочтительным?

Question

Я создаю приложение в Angular 5 с 3 основными экранами, по которым можно перемещаться с помощью вкладок.Я использовал угловую маршрутизацию для переключения между этими 3 видами и добавил отдельные компоненты для каждого из этих 3. Теперь я хочу добавить плавающую кнопку в нижней части экрана, которая при нажатии открывает новый экран с кнопкой закрытия.

ПРИМЕЧАНИЕ: Эта кнопка должна быть общей для всего приложения, и даже если экраны меняются, я не вижу, чтобы эта кнопка исчезала и появлялась после каждой загрузки экрана.

Основное сомнение заключается в том, чтокакой способ добавить кнопку предпочтительнее?

1. Плавающая кнопка Модуль
2. Плавающая кнопка Шаблон
3. Любая другая?

Я хорош в создании внешнего интерфейса для этого и дальнейших операций, которые происходят внутри него.Но я хотел бы знать, как лучше (рекомендуется) добавить эту кнопку.

Также, пожалуйста, объясните основной скелет и причину, по которой вы предлагаете этот способ.

Спасибо

Answer 1

Плавающая кнопка - это просто кнопка с примененным к ней CSS.Вам не нужны никакие специальные угловые концепции для его реализации.

Поскольку ваше требование состояло в том, чтобы кнопка оставалась постоянной на всех экранах, даже при изменении углового маршрута, это означает, что вы хотите, чтобы эта кнопка была расположена рядом ссамый верхний <router-outlet>, который у вас есть в приложении, которое обычно находится в шаблоне AppComponent (но может варьироваться в зависимости от вашей структуры).

Так что просто поместите туда кнопку и стилизуйте ее.

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
    <button class="float" (click)="onFloatClick()">Icon</button>
  `,
  styles: `
    .float {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      width: 1.5em;
      height: 1.5em;
    }
  `,
})
export class AppComponent {
  public onFloatClick () {
    // do your magic
  }
}