在 Angular 中使用 ngDefaultControl 时无法初始化默认值

Question

我使用了子组件，子组件包含ngDefaultControl 属性.

el-input.component.ts:

@Component({
  selector: 'el-input',
  template: ` <input type="text" /> `,
})
export class ElInput {}

我是这样用的：

@Component({
  selector: 'app-home',
  template: `
    <el-input ngDefaultControl [(ngModel)]="name"></el-input>
    <p>{{ name }}</p>
    <button (click)="onClick()">Change Name</button>
  `,
})
export class HomeComponent {
  name: string = 'Tom';

  onClick() {
    this.name = 'Jack';
  }
}

我把name的初始值设置为Tom，但是el-input没有显示。然后我点击按钮，什么也没有发生

点击按钮后：

我该如何解决

Answer 1

这是因为 [(ngModel)] 是原生 html 元素的 angular 指令

如果您想创建自定义输入，您需要在 elElement 组件内的 el 元素内创建一个 @Input 变量，并将其绑定到您的应用程序内

@Component({
selector: 'el-input',
template: ` <input type="text" [(ngModel)]='name' /> `,
})
export class ElInput {
   @Input()
   name: string
}

@Component({
  selector: 'app-home',
  template: `
    <el-input ngDefaultControl [name]="name"></el-input>
    <p>{{ name }}</p>
    <button (click)="onClick()">Change Name</button>
  `,
})
export class HomeComponent {
  name: string = 'Tom';

  onClick() {
    this.name = 'Jack';
  }
}

并且如果您想在更新 el 输入时更改 app-home 中的变量名称的值，您需要创建一个 @Output 变量，它将为您的 [=22] 发出新值=] 组件

我做了一个 stackblitz 来解决你的问题

https://stackblitz.com/edit/angular-utyrxo

在 Angular 中使用 ngDefaultControl 时无法初始化默认值

Unable to initialize default values when using ngDefaultControl in Angular

angular-ngmodel

angular

angular-forms