将角度代码拆分为不同的组件

Question

我的页面上有两个输入字段。一个是电子邮件类型，另一个是带有文本的输入字段。

一切正常。现在我想将组件分成两个 . 例如。我现在有一个“基本信息”组件。我想要一个基本信息组件内的“文本”组件并将文本代码移动到它。 输入.html

 <app-text *ngIf="info.type === 'text'"></app-text>
<input *ngIf="info.type === 'email'" type="text" [formControlName]="controlName" />

输入.ts

public info: InputInterface;

文本.html

<input *ngIf="info.type === 'text'" type="text" [formControlName]="controlName" />

文本.ts

public info: InputInterface;

我得到的错误是 autocomplete.ts 类型未定义。 我想我需要将属性从父组件（输入）传递给子组件（文本）。我是角度新手，无法弄清楚这一点。我尝试了@Input 指令，但错误仍然相同

Answer 1

如果您在子组件中声明输入，则需要通过父 HTML 文件将值传递给它。由于您没有在 parent.html 中传递“信息”，因此您会收到该错误。这是正确的方法：

文本.ts

@Input() public info: InfoInterface;

文本.html

<input *ngIf="info.type === 'text'" type="text"/>

parent.html（注意 *ngIf 在这里不是强制性的。它存在于您的代码中，所以我也在这里添加它，假设这是您的要求）

<app-text [info]="parentInfoToBePassed" *ngIf="parentInfoToBePassed.type === 'text'"></app-text>

父.ts

public parentInfoToBePassed: InfoInterface = {type: 'text'};

https://stackblitz.com/edit/angular-input-example 这是一个关于如何拆分代码和使用输入的简单示例。

希望这会有所帮助。有什么不清楚的地方告诉我