Какой код может быть статически проверен, а что нет - компилятором Angular AOT? - PullRequest
Новая
       36

Какой код может быть статически проверен, а что нет - компилятором Angular AOT?

0 голосов
/ 08 апреля 2019

Я работал над некоторыми угловыми переходами страниц, которые я хочу гибко определить.Поэтому я создал новый машинописный файл, который экспортирует массив, заполненный угловыми переходами.Однако, когда я компилирую проект с помощью компилятора AOT, он не работает, потому что массив не создан.Я не могу определить, почему массив не может быть создан статически.Итак, теперь мне интересно, почему это не может быть скомпилировано AOT?Что не является статичным в моем коде, который вызывает этот сбой? 

export const routerTransition = trigger(
  "routerTransition",
  ["page1", "page2", "page3"]
    .map(route => [
      transition("* => " + route, [
        query(":enter, :leave", style({ position: "fixed" }), {
          optional: true
        }),
        group([
          query(
            ":enter",
            [
              style({ transform: "translateX(100%)" }),
              animate(".3s ease-in-out", style({ transform: "translateX(0%)" }))
            ],
            { optional: true }
          ),
          query(
            ":leave",
            [
              style({ transform: "translateX(0%)" }),
              animate(
                ".3s ease-in-out",
                style({ transform: "translateX(-100%)" })
              )
            ],
            { optional: true }
          )
        ])
      ]),
      transition(route + " => *", [
        query(":enter, :leave", style({ position: "fixed" }), {
          optional: true
        }),
        group([
          query(
            ":enter",
            [
              style({ transform: "translateX(-100%)" }),
              animate(".5s ease-in-out", style({ transform: "translateX(0%)" }))
            ],
            { optional: true }
          ),
          query(
            ":leave",
            [
              style({ transform: "translateX(0%)" }),
              animate(
                ".5s ease-in-out",
                style({ transform: "translateX(100%)" })
              )
            ],
            { optional: true }
          )
        ])
      ])
    ])
    .reduce((total, pair) => total.concat(pair))
);

Хорошо, поэтому я нашел решение, которое работает.Тем не менее, я до сих пор не знаю, какой код принят, а какой нет.Поэтому я добавляю свое решение вопроса, так как вопрос до сих пор остается без ответа.Вот как это работает: 

export function toPage(route) {
  return transition("* => " + route, [
      query(":enter, :leave", style({ position: "fixed" }), {
        optional: true
      }),
      group([
        query(
          ":enter",
          [
            style({ transform: "translateX(100%)" }),
            animate(".3s ease-in-out", style({ transform: "translateX(0%)" }))
          ],
          { optional: true }
        ),
        query(
          ":leave",
          [
            style({ transform: "translateX(0%)" }),
            animate(
              ".3s ease-in-out",
              style({ transform: "translateX(-100%)" })
            )
          ],
          { optional: true }
        )
      ])
    ]);
}

export function fromPage(route) {
  return transition(route + " => *", [
    query(":enter, :leave", style({ position: "fixed" }), {
      optional: true
    }),
    group([
      query(
        ":enter",
        [
          style({ transform: "translateX(-100%)" }),
          animate(".5s ease-in-out", style({ transform: "translateX(0%)" }))
        ],
        { optional: true }
      ),
      query(
        ":leave",
        [
          style({ transform: "translateX(0%)" }),
          animate(
            ".5s ease-in-out",
            style({ transform: "translateX(100%)" })
          )
        ],
        { optional: true }
      )
    ])
  ]);
}

export function pageTransition(route) {
  return [toPage(route), fromPage(route)];
}

Эти функции теперь вызываются из компонента приложения следующим образом: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app-scss/app.component.scss'],
  animations: [trigger('routerTransition', [
    ...pageTransition('contact'),
    ...pageTransition('portfolio'),
    ...pageTransition('services'),
    ...pageTransition('about-us'),
    ...pageTransition('news'),
    ...pageTransition('home')
  ])]
})
...