Идентификатор элемента DOM установлен, но не может быть установлен на - PullRequest
Новая
       22

Идентификатор элемента DOM установлен, но не может быть установлен на

0 голосов
/ 20 июня 2019

Я хочу реализовать компонент, который динамически устанавливает идентификатор конкретного элемента в дереве DOM, учитывая параметр @Input.

Используя клиентскую библиотеку, в частности Stripe Client (stripe.js), я хочу смонтировать на этом элементе более сложные компоненты, например: 

@ViewChild('elementRef', {read: ElementRef}) elementRef: ElementRef;

// ..

get elementId() {
  return this.type ? this.type + '-element' : null;
}

ngOnInit() {
  this.elementRef.nativeElement.id = this.elementId;
  this._cd.detectChanges();
}

ngAfterViewInit() {
  this._element = this._stripeClientService.elements.create(this.type, this.options);

  setTimeout(() => {
    console.log(document.getElementById(this.elementId));
    this._element.mount(this.elementId);
  }, 100);


  this._element.on('change', (event) => {
    const displayError = document.getElementById('errors');
    if (event.error) {
      displayError.textContent = event.error.message;
      this.canSubmit = false;
    } else {
      displayError.textContent = '';
      this.canSubmit = true;
    }
  });
}

Проблема: хотя я использую setTimout() (не обязательно, imho), вызовите detectChanges(), и , попытайтесь инициализировать компонент в ngAfterViewInit(), я все еще получаю следующее: 

ERROR IntegrationError: The selector you specified (iban-element) applies to no DOM elements that are currently on the page. Make sure the element exists on the page before calling mount().
    at new t (https://js.stripe.com/v3/:1:11502)
    at t.<anonymous> (https://js.stripe.com/v3/:1:97045)
    at t.mount (https://js.stripe.com/v3/:1:25699)

** Однако * я также вижу это, исходя из console.log(document.getElementById(this.elementId));, в консоли: 

<div _ng-content-c29 id="card-element"></div>

Так вот что ..

Я не уверен, какие еще варианты у меня здесь.

1 Ответ

0 голосов
/ 20 июня 2019

Итак, я не знаю, почему он не работал с string. Я мог сделать это раньше, когда у меня были отдельные компоненты и я вставил card или iban отдельно. Тем не менее, это не похоже на работу в динамичной среде.

Но то, что делает , работает, по-видимому, так: 

this._element.mount(this.elementRef.nativeElement);

Я только что передал nativeElement, и, очевидно, API тоже может с этим работать.

...