从 angular 形式的子组件中获取父组件的属性

Question

我正在使用 Angular 6 和响应式表单，我需要在可编辑和自定义 'readonly' 视图之间切换表单。项目中有多个自定义输入组件，所以似乎最简单的方法是在 custom-form 元素上使用 [readOnly] 绑定。问题是：

如何在 custom-input 组件中获取父级的 readOnly 值而不直接绑定到每个组件？

例如：

表单模板

<custom-form formGroup="formGroup" [readOnly]="!(canEdit$ | async)">
  <custom-input formControlName="field1"></custom-input>
  <custom-input formControlName="field2"></custom-input>
  <custom-select formControlName="field3"></custom-select>
  ...
</custom-form>

自定义输入模板

// Show input if form readOnly is false
<input *ngIf="!formIsReadOnly"...>

// Show some other representation if not
<span *ngIf="formIsReadOnly">...</span>

Answer 1

如果您不想向自定义控件添加 readonly 输入参数，那么您将需要每个控件从其构造函数获取的服务或不透明令牌，以确定控件是否将是否只读。

对于不透明的令牌，您需要在应用程序的根目录中提供一个布尔值，然后任何时候您想要更改它都必须重新提供。

服务（Demo）

如果您希望能够打开或关闭只读值，您需要使用服务。

readonly.service.ts

@Injectable()
export class ReadonlyService {
  public readonly = false;
}

readonly.component.ts

@Component({
  selector: 'app-readonly',
  templateUrl: './readonly.component.html',
  providers: [ReadonlyService],
})
export class ReadonlyComponent implements OnInit {

  constructor(public readonlyService: ReadonlyService) { }

  ngOnInit() {
    this.readonlyService.readonly = true;
  }
}

customInput.component.ts

@Input() public value: any;
constructor(public readonlyService: ReadonlyService) { }

customInput.component.html

<ng-container *ngIf="!readonlyService.readonly; else readonlyView">
  <input placeholder="Enter a value" [(ngModel)]="value">
</ng-container>

<ng-template #readonlyView>
  Your readonly value is: {{value}}
</ng-template>

从 angular 形式的子组件中获取父组件的属性

Get parent's property from child component in angular form

angular

angular-forms

angular-template

服务（Demo）

从 angular 形式的子组件中获取父组件的 属性

Get parent's property from child component in angular form

angular

angular-forms

angular-template

服务（Demo）

从 angular 形式的子组件中获取父组件的属性