Angular 2组件为“布局”，其他组件在内部传递

Question

我有完全功能的应用程序与路线等。现在我需要将自定义表单添加到现有组件。

• 对于作为应用程序组件的子项的仪表板组件，我们正在传递<tile></tile>组件，这是一个简单的布局，类似于包含一些内容的框（标题，小时，描述）。
• 现在我需要将带有表单，输入等的自定义html传递给<tile></tile>

有可能吗？

Answer 1

我不太确定使用表单传递自定义HTML，但对于输入/变量，您可以执行以下操作。

假设您的组件名为TileComponent：

在tile.component.ts文件中，您需要声明输入变量。编辑导入以包含输入（即import { Component, Input } from '@angular/core';）。然后在您的课程中包含将要传递的相关变量，在这种情况下：@Input() title: string;，@Input() hour: string;，@Input() description: string;。

然后在你的tile.component.html文件中你会得到如下变量：  例如<p>{{title}} - {{description}} - Runtime: {{hour}}<p>。

在调用组件的位置，例如在dashboard.component.html上，您只需要将dashboard.component.ts中的变量分配给您想要传递的变量，例如：<title [title]="dashTitleVariable" [description]="dashDescVariable" [hour]="dashHourVariable]></title> < / p>