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

Posted 2023-02-22

【中文标题】如何在 Angular 6 中从父级 HTML 编辑共享组件

【英文标题】：How to edit a shared component from parent's HTML in angular 6

【发布时间】：2019-12-27 00:09:45

【问题描述】：

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>

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

我将如何实现它？

【参考方案1】：

您可以通过几个简单的步骤来实现： 在Child-Component.ts 文件中：

import Input from '@angular/core';

@Input('isData') isData;

在 parent-Component.html 文件中：

<app-child isData="true"></app-child>

【参考方案2】：

您可以通过使用查询（获取引用）嵌套在父级中的所有子组件

@ViewChildren(ChildComponent) dataItems: QueryList<ChildComponent>

或仅引用 1：

@ViewChild(ChildComponent) dataItem: ChildComponent;

然后您可以从父级订阅和控制每个单独组件的状态：

this.dataItem.isData = true // or false.

【参考方案3】：

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

child.component.html

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

child.component.ts

@Input('onlyForRead') onlyForRead: boolean;

parent.component.html

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