Добавление поддержки ngModel в пользовательские веб-компоненты - PullRequest
Новая
       6

Добавление поддержки ngModel в пользовательские веб-компоненты

0 голосов
/ 06 января 2019

Я создал собственный веб-компонент и хочу использовать его в своем проекте 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);

1 Ответ

0 голосов
/ 06 января 2019

Поскольку стандарт веб-компонентов не очень хорошо принят браузерами, фреймворки придумали собственную версию компонентов. Таким образом, вы должны использовать угловой компонент, если вы используете угловую структуру. Расширение 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".

...