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

Question

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

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

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

Answer 1

Поскольку виджет, вероятно, заменяет / создает содержимое данного контейнера, это, похоже, классический вариант использования для обычного компонента 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), как здесь.

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