Question

我已经创建了一个自定义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);

Answer 1

由于浏览器没有很好地采用Web组件标准，因此框架提出了自己的组件版本。因此，如果使用的是Angular框架，则应使用Angular Component。扩展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"。 / p>

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

1 个答案: