Угловой веб-компонент не работает должным образом - PullRequest
Новая
       14

Угловой веб-компонент не работает должным образом

0 голосов
/ 29 июня 2018

Я создал простой проект Angular 6, потому что хочу создать веб-компонент. ( GitHub URL ). Вы можете клонировать репо с помощью git clone https://github.com/CSantosM/angular-elements-demo.git.

Я следовал этому руководству и успешно создал веб-компонент. Однако, когда я тестирую этот веб-компонент в другом приложении с JavaScript, он не работает полностью.

Проблема в *ngIf="display" из button.component.ts html кода github : 

<div  *ngIf="display">
 <h3>Hello {{_userName}}</h3>
 <div class="button-row">
   <button mat-icon-button color="primary" (click)="toggleBlue()">
   <mat-icon aria-label="Example icon-button with a heart icon" 
      matTooltip="Like">favorite</mat-icon>
   </button>
 </div>
 <mat-icon *ngIf="blue">alarm</mat-icon>
</div>

Вставка веб-компонента в мое приложение JavaScript , расположенное здесь и динамическое изменение входного веб-компонента , кнопка не работает должным образом.

Мой index.html ( код github ): 

<div id="main" style="text-align: center;">
    <h1>Insert your name</h1>
    <form onsubmit="sendName(); return false" style="padding: 80px; margin: auto">
        <p>
            <label>User:</label>
            <input type="text" id="user" value="User1" required>
        </p>
        <p>
            <input type="submit" value="JOIN">
        </p>
    </form>
</div>

<custom-button name=""></custom-button>

<!-- WebComponent JS -->
<script type='application/javascript' src='custom-button.js'></script>
<!-- WebComponent JS -->

<script>

    function sendName() {

        var user = document.getElementById('user').value;
        var ov = document.querySelector('custom-button');
        ov.userName = user;
    }

</script>

Когда я нажимаю кнопку этого приложения, вызывается функция sendName() и изменяется userName input, угловая переменная с именем display меняется на true и веб-компонент можно увидеть. ( код GitHub )

Если я не включу переменную display, веб-компонент будет работать как надо.

Здесь вы можете увидеть поведение:

enter image description here

Это известная ошибка по Angular? Почему с простым * ngIf веб-компонент не работает нормально? Как можно решить эту проблему?

Заранее спасибо.

1 Ответ

0 голосов
/ 03 июля 2018

Я опубликовал выпуск в угловом репозитории github, и мне предложили обходной путь здесь

...