Обзор новых функций, включенных в Angular 2.3

В этом посте мы рассмотрим некоторые новые функции Angular 2.3. Это второстепенный выпуск после семантического управления версиями, объявленного еще в октябре. Давайте рассмотрим некоторые из этих функций:

  • Наследование компонентов
  • ViewContainer (структурные директивы) *
  • Доступ к угловой версии
  • Языковой сервис для шаблонов

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

Последние новости Angular можно найти в моей ленте на @gerardsans.

* Исправление: эта функция была доступна с финальной версии Angular. Я сохраню это, поскольку считаю, что о нем стоит знать. Спасибо Нетанел Базал за внимание!

Наследование компонентов

Это очень интересное дополнение в Angular 2.3. Используя наследование компонентов, мы можем улучшить возможность повторного использования кода и ускорить разработку.

Начнем с быстрого обзора Наследование классов ES6. Мы будем использовать пример с использованием классов Polygon и Square.

Обратите внимание, что наследование классов ES6 - это только синтаксический сахар поверх прототипного наследования ES5.

Многоугольник - это наш базовый класс. Square, производный класс, будет иметь доступ к функциям, доступным в Polygon, и сможет переопределять их или добавлять новые. Square класс, унаследованный от Polygon с помощью extends (строка 9). Это даст ему доступ к своему конструктору с использованием super (строка 11) и всех его свойств и методов. Он также расширил базовый класс, добавив геттер area (строки 14–16).

Если в классе Square не определен конструктор, будет использоваться конструктор Polygon.

Наследование компонентов в Angular 2.3 охватывает все следующее

  • Метаданные (декораторы): метаданные, определенные в производном классе, переопределят любые предыдущие метаданные в цепочке наследования, в противном случае будут использоваться метаданные базового класса.
  • Конструктор: будет использоваться конструктор базового класса, если у производного класса его нет.
  • Перехватчики жизненного цикла: перехватчики родительского жизненного цикла будут вызываться, даже если они не определены в производном классе.

Наследование метаданных охватывает множество декораторов: класс (@NgModule, @Component, @Directive, @Pipe), свойства (@Input, @Output, @ ContentChild / Children, @ ViewChild / Children, @HostBinding, @HostListener) и аргументы (@Host , @По желанию). Отметьте коммит здесь, чтобы узнать полный список.

Анимации пока не поддерживаются, поэтому они не используются производным классом.

Рассмотрим простой пример наследования компонентов:

В этом примере Компонент Сотрудника унаследовал атрибут name через @Input от Компонента Человека и добавил новый, id (строка 19). Как и в случае с наследованием ES6, мы можем переопределить любые настройки родительского объекта в соответствии с нашими требованиями.

Наследование компонентов - это очень мощный инструмент, который поможет вам создавать лучшие приложения.

Шаблоны не наследуются, поэтому любая общая модель DOM или поведение должны обрабатываться отдельно.

Более полный пример можно найти здесь. Вы также можете прочитать более подробную информацию в этом коммите.

ViewContainer (структурные директивы)

Начиная с Angular v2 *, мы можем использовать ViewContainer, упрощающий создание структурных директив, например ngIf.

Нам не нужно вручную создавать представление, настраивать результирующие элементы DOM и подключать обнаружение изменений. ViewContainer решит эти проблемы за нас, в результате чего будет получен следующий код.

Давайте посмотрим на примере, как мы будем его использовать

<div>
  <h2 *myIf="show">Hello {{name}}</h2>  <-- EmbeddedView 
  <button (click)="show=!show">
    Toggle
  </button>
</div>

Это синтаксический сахар для

<template [myIf]="show">     <-- ViewContainerRef
  <h2>Hello {{name}}</h2>      <-- TemplateRef
</template>

Вы можете поиграть с финальным кодом здесь.

Более подробную информацию можно найти в слайдах от Павла Козловского на сайте ng-be.

Доступ к угловой версии

Это удобная функция, добавляющая версию Angular, используемую в корневом компоненте. В качестве примера рассмотрим эталонную реализацию Plunker ниже.

<my-app ng-version="2.3.0">
  <div>
    <h2>Hello Angular2</h2>
  </div>
</my-app>

Мы также можем получить доступ к сведениям о версии программно, используя следующий код.

import {VERSION} from '@angular/core';
console.log(VERSION);
// {
//  full: "2.3.0"
//  major: "2"
//  minor: "3"
//  patch: "0"
// }

Демо этого кода можно найти здесь.

Языковая служба для шаблонов

Подобно языковой службе TypeScript, эта языковая служба будет обеспечивать поддержку шаблонов Angular. Используя его, IDE смогут предоставлять более подробную информацию об ошибках и автозавершении типов. Также скоро ожидается поддержка VS Code!

Я действительно рекомендую посмотреть Keynote на ng-be Игоря Минара, посвященный будущим версиям Angular и семантическому управлению версиями.

Это все! Думаете, я пропустил некоторые функции? Свяжитесь со мной на @gerardsans или на gerard.sans_at_gmail.com. Спасибо за прочтение!



Сообщество AngularZone
Добро пожаловать в наше сообщество. Наша страсть - Angular. Присоединяйтесь к нам! 🚀