Как правильно реализовать стороннюю библиотеку, которая управляет Dom? - PullRequest
Новая
       28

Как правильно реализовать стороннюю библиотеку, которая управляет Dom?

0 голосов
/ 31 декабря 2018

Я использую стороннюю библиотеку для отображения виджета на экране (SignInWidget от Okta).Вид визуализации виджета таков: 

this.oktaSignInWidget.renderEl(
    { el: '#widget-container' },
    () => {},
    err => {
      console.error(err);
    }
  );

Моя первоначальная мысль заключалась в том, чтобы поместить это в директиву, но даже с директивами вы должны позволять Renderer2 выполнять рендеринг.Есть ли здесь лучшая практика?

1 Ответ

0 голосов
/ 04 января 2019

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

Если вы создаете компонент с селектором myapp-login, вы можете просто поместить его в некоторые из ваших логиновстраницы: 

<h1>Login</h1>
<p>Hi people, login to get more features:</p>
<myapp-login></myapp-login>

Приблизительно следуя этой статье в Angular University о @ViewChild (в которой также кратко упоминаются сторонние библиотеки), этот SO-ответ или статья Использование сторонней библиотеки внутри Angular2 от Netanel Basal (без ввода) мы можем действовать следующим образом:

Чтобы получить доступ к элементу в вашем пользовательском компоненте, вы должны позволить Angular добавить ссылку наэлемент, помеченный #container путем добавления типизированного свойства ElementRef, украшенного @ViewChild('container'). 

@ViewChild('container')
container: ElementRef;

В конструкторе компонента вы можете создать свой экземпляр виджета.

После просмотраПосле инициализации вы должны позволить экземпляру виджета визуализировать себя в элемент контейнера.Не забудьте уничтожить виджет, когда компонент уничтожается (возможно, путем вызова .remove()).

Это непроверенный скелет для вашего компонента входа в систему: 

...
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
import '@okta/okta-signin-widget/dist/css/okta-theme.css';

@Component({
  selector: 'myapp-login',
  template: '<div #container></div>'
})
export class Login implements AfterViewInit, OnDestroy {
  @ViewChild('container')
  container: ElementRef;

  oktaSignInWidget: OktaSignIn;

  constructor() {
    this.oktaSignInWidget = new OktaSignIn({baseUrl: 'https://{yourOktaDomain}'});
  }

  ngAfterViewInit() {
    const containerElem = this.container.nativeElement;
    this.oktaSignInWidget.renderEl(
      { el: containerElem },
      response => {}, // success callback
      error => {} // error callback 
    );
  }

  ngOnDestroy() {
    if (this.oktaSignInWidget) {
      this.oktaSignInWidget.remove();
      this.oktaSignInWidget = null;
    }
  }
}

Вы должны переместить базовую конфигурациюдомена и других специфичных для среды данных в специальный файл (environment.ts), например здесь .

Если после попытки входа в систему произойдет что-то значимое, вы должны создать службу, которая обрабатываетсостояние аутентификации и делегировать ему (преобразованные) результаты.

...