在自定义 Web 组件中添加 ngModel 支持答案

【问题标题】：Adding ngModel support in custom web components在自定义 Web 组件中添加 ngModel 支持
【发布时间】：2019-01-06 16:07:15
【问题描述】：

我创建了一个自定义 Web 组件，我想在我的 Angular 项目中使用它。但问题是我正在绑定 [(ngModel)]，它是 js 的一个属性，所以它将它小写为 [(ngmodel)]。因此 Angular 无法识别，因此无法绑定它。在这种情况下需要立即帮助。

class FormAngInput extends HTMLElement {
constructor(){
    super()
}
connectedCallback() {
    var template = `
    <style>
    .no {
        color: green;
    }
</style>
<p class='no'> Shadow DOM</p>
        <input type='text' value='test' 
[(ngModel)]='numberValue' />
    `
    this.innerHTML = template
} } customElements.define("form-ang-input", FormAngInput);

【问题讨论】：

看起来不是一个有效的 Angular 组件？这是 AngularJS 吗？
@Atomzwieback 不，这不是角码。它是创建自定义组件的 Javascript 代码。我想在角度 4+ 中使用标记。因此，要进行双向绑定，这种格式的属性必须是 [(ngModel)]，但 js 将其小写为 [(ngmodel)]，因此 angular 无法检测到它。
stackoverflow.com/questions/34948961/…

标签： javascript angular web-component

【解决方案1】：

由于浏览器没有很好地采用 Web 组件标准，因此框架已经提出了自己的组件版本。因此，如果您使用 Angular 框架，则应该使用 Angular 组件。扩展 HtmlElement 让我觉得这是一种非常非常规（阅读困难）的方法。您可以在 @Component 装饰器中执行此操作，如下所示：https://stackblitz.com/edit/angular-pgubhw

@Component({
  selector: 'my-app',
  template: `<p class='no'> Shadow DOM</p>
    <input type='number' value='test' 
    [(ngModel)]='numberValue' />

    <div>numberValue is: {{numberValue | json}}</div>`,
  styles: [`.no {
    color: green;
    }`
  ]
})

您正在通过[(ngModel)] 绑定一个名为numberValue 的变量，因此您需要在某处声明该变量并且您可能应该输入input type="number"。

【讨论】：

不，我不是这个意思。通过此链接developer.mozilla.org/en-US/docs/Web/Web_Components。你会明白我在这里想要做什么。
我不是说你错了。但对我来说，使用 Angular 以与 Angular 的实现竞争的方式制作 Web 组件是没有意义的，因为你依赖于 Angular。这对我来说似乎是循环的。如果您想在支持的浏览器上实现本机影子 DOM，请使用 ViewEncapsulation.Native。这样您就可以避免创建自己的 Web 组件实现。然后，您可以按照我描述的使用原生 Shadow DOM 的方式使用 Angular 组件来解决您的 ngModel 问题。