Angular 7 уже близко. Изменения компилятора

Angular 7 уже близко. Изменения компилятора

Сегодня Angular Team выпустила бета-версию Angular 7. Многим из нас будет интересно узнать, какие функции и исправления ошибок мы можем увидеть в этом бета-релизе.

Фичи Angular 7

Давайте поговорим о новых возможностях

Angular 7 Компилятор совместимости (ngcc)

Этот компилятор преобразует папки node_modules составленных с ngc, в node_modules, в которые были скомпилированы с ngtsc. Это преобразование позволит использовать такие “устаревшие” пакеты движком рендеринга как Ivy.

DoBootstrap

Новый жизненный цикл компонента ngDoBootstrap.

class AppModule implements DoBootstrap {
  ngDoBootstrap(appRef: ApplicationRef) {
    appRef.bootstrap(AppComponent);
  }
}

Compiler

Обновлены плейсхолдеры XMB (<ph>), чтобы включить исходное значение поверх примера. Теперь плейсхолдеры могут по определению иметь один пример тега (<ex>) и текстовый узел. Текстовый узел используется TC как “исходное” значение из заполнителя, в то время как пример должен представлять фиктивное значение. Давайте рассмотрим примеры ниже:

Старая реализация:

Сообщение по типу <foo>Band: {{yourName}}</foo> генерировалось в xmbmessage:

<msg id=123>Name: <ph name=”INTERPOLATION”><ex>{{yourName}}</ex></ph></msg>

Новая реализация в Angular 7:

Сообщение по типу <foo>Name: {{yourName}}</foo> генерировалось в xmbmessage:

<msg id=123>Name: <ph name=”INTERPOLATION”><ex>{{yourName}}</ex>{{yourName}}</ph></msg>

PCDATA <ph> (текстовый узел)используется TC для некоторых проверок.

Исправление багов

Bazel

Now compile_strategy() is used to decide whether to build Angular code using ngc (legacy) or ngtsc (local). In order for g3 BUILD rules to switch properly and allow testing of Ivy in g3, compile_strategy() became importable.

Теперь compile_strategy () используется, чтобы решить, строить ли Angular код с помощью ngc (legacy) или ngtsc (local). Чтобы правила сборки g3 правильно переключались и позволяли тестировать Ivy в g3, compile_strategy () стала импортируемой.

Ivy

Функции шаблона для динамически создаваемых представлений больше не вложены друг в друга. Вместо вложенности функций и использования замыканий для получения родительских контекстов родительские контексты переопределяются явно с помощью инструкции. Это означает, что мы больше не создаем несколько экземпляров функций для циклов, вложенных в другие циклы.

Пример:

<ul *ngFor="let list of lists">
   <li *ngFor="let item of list'> {{ item }} {{ name }} </li>
</ul>

Before:

function AppComponent(rf: RenderFlags, ctx: AppComponent) {
      // some instructions here
      function ulTemplate(rf1: RenderFlags, ctx0: any) {
            // instructions

            function liTemplate(rf1: RenderFlags, ctx1: any) {...}
      }
}

After:

function ulTemplate(rf: RenderFlags, ctx: any) {...}
function liTemplate(rf: RenderFlags, ctx: any) {
  if (rf & RenderFlags.Create) {
      T(0);
  }
  if (rf & RenderFlags.Update) {
     const item = ctx.$implicit;
     const comp = x(2);
     t(0, i2('', item, ' ', comp.name, ''));
  }
}

function AppComponent(rf: RenderFlags, ctx: AppComponent) {
      // some instructions here
}

TView.components больше не отслеживают индексы директив (только индексы элементов хоста). Мы можем разрезать массив components пополам, потому что контекст для components теперь хранится в экземпляре компонента LViewData и может быть доступен оттуда.

Теперь у нас есть новая инструкция reference () (r ()). Ранее мы использовали замыкания, чтобы получить доступ к локальным ссылкам в родительских представлениях. Теперь, когда вложенные функции шаблона являются плоскими; у них нет доступа к локальным ссылкам через замыкание, поэтому нам нужен другой способ обхода дерева представлений. ссылка берет уровень вложенности, и локальный индекс ref, после чего обходит дерево представления, чтобы найти правильное представление, из которого загрузить локальный ref.

Before:

function AppComponent(rf: RenderFlags, ctx: AppComponent) {
  if (rf & RenderFlags.Create) {
      Ee(0, 'div', null, ['foo', '']);
      C(2, nestedTemplate, null, [AttributeMarker.SelectOnly, 'ngIf']);
  }
  const foo = load(1) as any;
  function IfTemplate(rf: RenderFlags, ctx: any) {
      if (rf & RenderFlags.Create) {
         T(0);
      }
     if (rf & RenderFlags.Update) {
         t(0, bind(foo));
     }
  }
}

After:

function IfTemplate(rf: RenderFlags, ctx: any) {
    if (rf & RenderFlags.Create) {
       T(0);
    }
   if (rf & RenderFlags.Update) {
      const foo = reference(1, 1) as any;
      t(0, bind(foo));
   }
}
function AppComponent(rf: RenderFlags, ctx: AppComponent) {
  if (rf & RenderFlags.Create) {
      Ee(0, 'div', null, ['foo', '']);
      C(2, nestedTemplate, null, [AttributeMarker.SelectOnly, 'ngIf']);
  }
}

Core

Теперь Angular обрабатывает ошибки для @Output лучше, если свойство не инициализировано.

 

Оригинал статьи: https://itnext.io/angular-7-is-coming-766c2bf644f9
Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *