写项目的时候遇到一个需求：a.html中内容有两个状态，当放在edit.html中的时候，a.html是input框，当在show.html中使用a.html的时候，a.html是label。
结构如图，应该是一个很简单的功能，但是因为对父子传值概念不清晰，@input使用不熟练，导致这个问题卡了一天，最后解决代码如下
代码：
a.html:
<div class="input">
<input pInputText placeholder="请输入单位名称" formControlName="orgName" *ngIf="formStatu == 'edit'">
<label *ngIf="formStatu == 'show'">{{basicInfoForm.value.orgName}}</label>
</div>
a.ts:
@Input() formStatu;
b.html:
<app-org-basic-mess [formStatu]="edit"></app-org-basic-mess>
<app-check-info></app-check-info>
b.ts:
edit = 'edit'
c.html:
<app-org-basic-mess [formStatu]='show' #basic></app-org-basic-mess>
c.ts:
show = 'show'
努力想把逻辑给大家写的简单，所以只把主要的代码粘出来，其中组件a是文中的org-basic-mess，是最底层的子组件，组件b是文中的是顶层父组件，组件c是文中的check-info，他既是组件b的子组件，又是组件a的父组件