Настройте пользовательский элемент javascript файл, созданный из Angular 8, используя другой тег сценария. - PullRequest
Новая
       77

Настройте пользовательский элемент javascript файл, созданный из Angular 8, используя другой тег сценария.

1 голос
/ 28 января 2020

Я работаю над созданием виджета для встраивания, используя пользовательский элемент Angular 8. Я сделал кнопку и дал функцию при нажатии на нее. После создания проекта я получил файл сценария, который можно разместить на любом веб-сайте с пользовательским тегом элемента. 

<conv-widget></conv-widget>
<script src="../elements/conv-widget.js"></script>

Теперь я хочу изменить цвет своей кнопки с помощью тега сценария. При размещении его под исходным файлом сценария, он не меняет цвет, поскольку страница уже была бы загружена.

Но если я поставлю его выше кода, он все равно не будет работать, так как выдает ошибку, что идентификатор кнопки равен нулю. 

<conv-widget></conv-widget>
<script src="../elements/conv-widget.js"></script>
<script type="text/javascript">
    var btn = document.getElementById('button');
    btn.style.backgroundColor="#232323";
</script>

или 

<conv-widget></conv-widget>
<script type="text/javascript">
    var btn = document.getElementById('button');
    btn.style.backgroundColor="#232323";
</script>
<script src="../elements/conv-widget.js"></script>

Я даже попытался использовать тот же код в основном файле сценария, который был создан. Все еще не придет. 

<conv-widget></conv-widget>
<script type="text/javascript">
    var Bd = Ur("ng-component", gu, $d, {}, {}, []), qd = tr({
    encapsulation: 3,
    styles: [
        ["#button{background-color:#000;}"]
    ],
    data: {}
});
</script>

Это не работает для меня. Пожалуйста, помогите мне, дав любой способ решить эту проблему.

Содержимое conv-виджета: 

<ng-container *ngIf="!show">
<button (click)="toggle()" id="button">
</button>
</ng-container>

CSS Код conv-виджета: 

#button {
   background-color: rgb(193, 0, 61);
    border-radius: 50%;
    height: 60px;
   width: 60px;
  }

Я пытаюсь изменить цвет кнопки используя новый тег сценария.

Снимок экрана ошибки консоли, которую я получаю

...