无法通过2个级别传递ngModel

Question

我正在尝试通过第二个子组件传递ngModel，但是一旦这样做，它就无法正常工作。为了传递ngModel，我使用了这个抽象类：

export abstract class AbstractValueAccessor implements ControlValueAccessor {
  _value: any = '';
  get value(): any { return this._value; };
  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  writeValue(value: any) {
    this._value = value;
    this.onChange(value);
  }

  onChange = (_) => { };
  onTouched = () => { };
  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

export function MakeProvider(type: any) {
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => type),
    multi: true,
  };
}

然后我有一个扩展该抽象类的输入组件：

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [MakeProvider(InputComponent)],
})

export class InputComponent extends AbstractValueAccessor {
  @Input('displaytext') displaytext: string;
  @Input('placeholder') placeholder: string;
}

使用此模板：

<ion-input 
  [(ngModel)]="value"
  type="text"
  ></ion-input>

如此出色的作品：

<app-input [(ngModel)]="value"></app-input>

但是，当我像这样围绕它制作一个组件时：

@Component({
  selector: 'app-form-input-item',
  templateUrl: './form-input-item.component.html',
  styleUrls: ['./form-input-item.component.scss'],
  providers: [MakeProvider(FormInputItemComponent)],
})
export class FormInputItemComponent extends AbstractValueAccessor {
  @Input() position: string;
}

并以这种方式使用：

<app-item>
  <app-label [position]="position"><ng-content></ng-content></app-label>
  <app-input [(ngModel)]="value"></app-input>
</app-item>

然后在其父级中将其称为：

<app-form-input-item *ngFor='let item of data' position="floating" [(ngModel)]="item.value">
  <b>{{item.title}}</b>
</app-form-input-item>

ngModel为空。我可以对其进行编辑，但它会发生变化，但某些内容会不断清空。如果将<app-input>更改为<ion-input>，它将再次起作用。我在这里错了吗？

更新：

这是我的应用项目外观：

<ion-item>
  <ng-content></ng-content>
</ion-item>

Stackblitz（感谢@GaurangDhorda）：https://stackblitz.com/edit/angular-6md19e

Answer 1

您可以在此StackBlitz Link中找到完整的工作示例，>

这是您的main app.component.html

<div style="box-shadow : 1px 2px 3px ; padding:1rem">
    <app-item style="text-align:center;">
         <div style="margin-top:1em">  
              <span> custom app-input </span>
              <app-input [(ngModel)]="val" ></app-input>
         </div>
    </app-item>
</div>
<div style="box-shadow: 1px 2px 3px; margin:1em; padding:1em">
    {{val}}
</div>
在此模板中，一个父组件是<app-item>，在其中放置了自定义<app-input>组件。为了使这项工作有效，我们必须在<ng-content>组件模板中提供<app-item>。因此，自定义<app-input>被加载到项目组件的<ng-content>内部。 

[<app-item>组件模板是...

<p>
  item works!
  <ng-content></ng-content>
</p>
现在，进入您的自定义应用程序输入

组件。

<input type="text"  [(ngModel)]="value">