由于要创建Web组件,因此我创建了一个简单的Angular 6项目。(GitHub URL)。您可以使用克隆克隆仓库git clone https://github.com/CSantosM/angular-elements-demo.git
。
我已经按照本教程进行操作,并且成功创建了Web组件。但是,当我在另一个使用JavaScript的应用程序中测试此Web组件时,它无法完全正常工作。
问题是*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>
将Web组件插入此处的JavaScript应用中并动态更改输入的Web组件,该按钮无法正常工作。
我的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,并且可以看到Web组件。(github代码)
如果我不包含display
变量,则Web组件将按预期工作。
在这里,您可以看到行为:
Angular是否存在已知错误?为什么使用简单的* ngIf,Web组件不能正常工作?如何解决呢?
提前致谢。
我在有角github存储库中发布了这个问题,他们为我提供的解决方法在这里
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句