javascript - 如何在 Angular 6 中从父级的 HTML 编辑共享组件

Question

child.component.ts

//ignoring all imports

@component({
   selector: 'app-child',
   template: './child.component.html'
})

import class ChildComponent {

   //logic not of use

   public isData: boolean = false;
}

child.component.html

<input type="text" value="xyz" [readonly]="isData">

parent.component.ts

//ignoring all imports

parent.component.html

<app-child></app-child>

在这里，我想在父级内部使用子组件，但我不想要输入字段只读，而是在子级内部更改它我想在父级内部更改它，以便我的子组件应该不被打扰。

我将如何实现它？

Answer 1

您应该在子组件中提供一些参数来打开/关闭只读属性 - 例如

child.component.html

<input type="text" value="xyz" [readonly]="isData || onlyForRead">

子组件.ts

@Input('onlyForRead') onlyForRead: boolean;

parent.component.html

<app-child [onlyForRead]='false'></app-child>