Angular Web 组件无法正常工作

Question

我创建了一个简单的 Angular 6 项目，因为我想创建一个 Web 组件。 (GitHub URL)。您可以使用 git clone https://github.com/CSantosM/angular-elements-demo.git.

克隆 repo

我已关注 this tutorial，并且成功创建了 Web 组件。但是，当我使用 JavaScript 在另一个应用程序中测试此 Web 组件时，它无法完全正常工作。

问题是button.component.ts的*ngIf="display" html github code:

<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 应用程序中插入 Web 组件 located here 并且 动态更改输入 Web 组件，按钮无法正常工作。

我的 index.html 是 (github code):

<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 发生变化，angular 变量 命名为display改为true可以看到web组件。 (github code)

如果我不包含 display 变量，Web 组件将正常工作。

在这里你可以看到行为：

Angular 是已知错误吗？为什么使用简单的 *ngIf，Web 组件不能正常工作？如何解决这个问题？

提前致谢。

Answer 1

我在 angular github 回购中发布了这个问题，他们提供给我的解决方法是 here

Angular Web 组件无法正常工作

Angular web component does not work as it should

angular

angular6

angular-elements