В Angular 2 пока нет основных библиотек шаблонов пользовательского интерфейса, готовых для plug and play. Angular 2 Material Design находится в альфа-версии. Библиотека Bootstrap для Angular 2 также находится в разработке на Github, но не готова к использованию в прайм-тайм. Это означает, что создание пользовательского интерфейса для наших проектов Angular 2 в значительной степени предоставлено нашим собственным устройствам.
Давайте посмотрим, как запустить наш проект Angular 2 с помощью Bootstrap, но только с помощью таблиц стилей - без bootstrap.js или jQuery. Мы будем использовать Bootstrap 3, текущий стабильный выпуск, а не Bootstrap 4, на который нацелен проект
Angular 2 Bootstrap.
В этой статье мы создадим панель навигации Bootstrap как компонент Angular 2 и включим ее функцию переключения мобильного представления через класс компонента.
Мы пойдем по пути наименьшего сопротивления и просто заставим меню показывать и скрывать. В этом уроке мы откажемся от анимации перехода.
Для начала создайте NavbarComponent. Я поместил свой в CoreModule моего приложения Angular 2. Чтобы узнать больше об используемой мной модульной архитектуре, прочтите эту статью.
Начнем с голой панели навигации Bootstrap. Классы .collapse css еще не добавлены в html.
<!-- core/navbar.component.html -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Project Manager</a>
</div>
<ul class="nav navbar-nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
</nav>
Файл TypeScript содержит следующее.
// core/navbar.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'ct-navbar',
templateUrl: 'app/core/navbar.component.html'
})
export class NavbarComponent { }
Добавьте панель навигации в шаблон AppComponent.
<!-- /app.component.html --> <!-- navbar --> <ct-navbar></ct-navbar> <!-- feature content --> <ct-project-center></ct-project-center>
Запустите приложение, и панель навигации отобразит следующее.
Обратите внимание, что bootstrap.css обрабатывает отображение мобильной панели навигации для нас с помощью медиа-запроса - @media(min-width: 768px){...}
Чтобы наша навигационная панель свернулась, мы добавляем еще немного разметки в наш шаблон, используя Документацию Bootstrap в качестве руководства.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <!-- #1 -->
<a class="navbar-brand">Project Manager</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div> <!-- #2 -->
</div>
</nav>
- Добавьте ‹button› с классами navbar-toggle и свернутыми. Он отображается, когда ширина области просмотра браузера меньше 768 пикселей.
- Оберните элемент ‹ul› в ‹div› классами collapse и navbar-collapse. Это приведет к тому, что элементы управления в списке ‹ul› больше не будут отображаться в мобильном представлении.
Попробуйте добавить класс in в ‹div›.
<div class="collapse navbar-collapse in">
Вы увидите, что добавление этого класса - это механизм для расширения меню.
Чтобы меню работало, нам нужно, чтобы Angular переключал этот класс за нас.
NgClass
Angular предоставляет директиву NgClass как средство для добавления и удаления классов из элементов html. Он принимает в качестве аргумента три разных типа ввода:
- строка - введите строку в ngClass, чтобы добавить один или несколько классов. Несколько классов разделяются пробелом. например
[ngClass]="'first second'" - Массив - введите массив, содержащий строковые значения классов, которые вы хотите добавить.
- Объект. Введите объект, в котором свойство объекта представляет класс. Для свойства установлено логическое значение, указывающее, следует ли добавить класс к элементу html.
NgClass является частью CommonModule, который, скорее всего, уже был импортирован в модуль, над которым вы работаете.
Мы применим директиву NgClass к нашему шаблону, введя объект в качестве аргумента.
<!-- core/navbar.component.html -->
...
<div class="collapse navbar-collapse"
[ngClass]="{ 'in': true }">
<ul class="nav navbar-nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
...
Мы жестко запрограммировали значение true, чтобы получить представление о синтаксисе и убедиться, что он работает. Запустите приложение и убедитесь, что панель навигации открыта с размером экрана мобильного
.
В классе компонента давайте создадим переменную для хранения состояния навигационной панели и создадим метод для использования в качестве обработчика кликов.
// core/navbar.component.ts
...
export class NavbarComponent {
isIn = false; // store state
toggleState() { // click handler
let bool = this.isIn;
this.isIn = bool === false ? true : false;
}
}
Теперь мы используем эти свойства компонентов в нашем шаблоне.
<!-- core/navbar.component.html -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
(click)="toggleState()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Project Manager</a>
</div>
<div class="collapse navbar-collapse"
[ngClass]="{ 'in': isIn }">
<ul class="nav navbar-nav">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
</ul>
</div>
</div>
</nav>
Вот и все. Теперь у нас есть функциональная панель навигации.
Этот же метод можно применить для использования многих компонентов Bootstrap в вашем проекте Angular 2, включая раскрывающиеся меню и складные панели в стиле аккордеона.
