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

Я создаю приложение в Angular 5 с тремя основными экранами, по которым мы можем перемещаться с помощью вкладок. Я использовал маршрутизацию Angular для переключения между этими тремя представлениями и добавил отдельные компоненты для каждого из этих трех. Теперь я хочу добавить плавающую кнопку внизу экрана, которая при нажатии открывает новый экран с кнопкой закрытия.
< br> ПРИМЕЧАНИЕ. Эта кнопка должна быть общей для всего приложения, и даже если экраны меняются, я не должен видеть, как эта кнопка исчезает и появляется снова после каждой загрузки экрана.

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

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

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

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

Спасибо


angular angular-components angular-module angular2-routing angular5
person beta programmers    schedule 23.09.2018    source источник
comment
Просто создайте компонент плавающей кнопки и добавьте его в HTML-файл, содержащий розетку маршрутизатора.   -  person user184994    schedule 23.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

Поскольку ваше требование состояло в том, чтобы кнопка была постоянной на всех экранах, даже при изменении маршрута Angular, это означает, что вы хотите, чтобы эта кнопка располагалась рядом с самым верхним <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
  }
}
person Lazar Ljubenović    schedule 23.09.2018
comment
Есть ли способ сделать что-то вроде этого - $('.float').on('click', (function(){dosomething})) в классе компонентов, а не добавлять (щелчок) в кнопку и реализовать этот метод в компоненте? - person beta programmers; 23.09.2018
comment
Если я не ошибаюсь, Renderer - это способ сделать вышеописанное? - person beta programmers; 23.09.2018
comment
Почему вы хотите использовать свой первый пример вместо второго? Вся идея шаблонов состоит в том, чтобы избежать первого способа ведения дел. - person Lazar Ljubenović; 23.09.2018
comment
Если я не хочу касаться DOM и хочу записать все события кликов в одном месте, не будет ли полезно, если я напишу его отдельно, а не буду писать (щелчок)/(фокус)/(изменение) и т. д. в одном линия. Было бы проще написать шаблон и прослушиватели событий независимо друг от друга. Таким образом, я могу вернуться и написать дополнительный прослушиватель событий для кнопки, не нарушая шаблон.. правильно? - person beta programmers; 23.09.2018