Угловая пользовательская директива ngIf 'as' - PullRequest
Новая
       33

Угловая пользовательская директива ngIf 'as'

0 голосов
/ 01 марта 2019

Я создаю пользовательскую директиву * ngIf для замены содержимого заполнителем во время его загрузки.У меня все работает так, как я хочу, и смоделировал это после директивы * ngIf (https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts). Единственное, что не работает, это синтаксис «как», и я не вижу ссылок на него или с чего начать. 

*myCustomDirective="loading$ | async as result"

Выше не работает, результат не определен, когда загрузка $ observable испускает данные. Однако заполнитель показывается и заменяется содержимым, как и ожидалось. (Содержимое дает ошибки, хотя из-за неопределенного результата)

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Речь идет о микросинтаксисе структурных директив Angular (https://angular.io/guide/structural-directives#microsyntax)

. Если вы хотите, чтобы ваш контекст экспортировался через синтаксис as, вам следует использовать точно такое же имя, какое у вашей директивы при экспорте, т.е. 

this.viewContainerRef.createEmbeddedView(this.templateRef, {myCustomDirective: this.context})

Вы также можете использовать синтаксис $implicit - это позволит вам экспортировать контекст через переменную let без указания имени (экспорт по умолчанию).

См.это пример для деталей.

0 голосов
/ 05 марта 2019

Обновленный ответ : Вы можете скопировать и вставить директиву NgIf из Angular GitHub, и единственное, что вам нужно сделать, это изменить имя NgIfContext#ngIf, чтобы оно соответствовало вашему имени, например, директивы if: 

export class NgIfContext {
  public $implicit: any = null;
  public appCustomIf: any = null;
}

Затем измените имена всех Input() соответственно, чтобы они также соответствовали имени вашей директивы.С этим ключевое слово as будет работать.См. StackBlitz demo.

EDIT : в качестве дополнительной ссылки вы можете следовать этим коммитам в # 15025 запрос на получение.чтобы увидеть, как они реализовали ключевые слова as в NgIf и NgForOf.Вкратце:

  1. В a63d57f они добавили ключевое слово as в синтаксический анализатор.
  2. В 203ee65 и ef93998 они преобразовали NgIf и NgForOf соответственно, чтобы использовать синтаксис as.
  3. Наконец, в 71d43db они выставили NgForOfContext, NgIfContext и сделали NgForOf для использования NgForOfContext.

Также, если вам интересно, вы можете увидеть, как они реализовали let в NgIf, выполнив # 13297 запрос на получение.

Этот может помочь вам понять, что происходит внизу.

Оригинальный ответ: Если вам на самом деле все равно *Синтаксис 1062 *, и вам нужна только рабочая переменная шаблона, это сделает работу. 

*appCustomIf="test$ | async; let result"

Работает с копиями и вставками ngIf из Angular github.См. StackBlitz демо.

...