【问题标题】:Angular 2 component as "layout" with other component passed insideAngular 2 组件作为“布局”,其中传递了其他组件
【发布时间】:2017-07-14 10:39:13
【问题描述】:

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

  • 对于作为应用程序组件子级的仪表板组件,我们传递<tile></tile> 组件,这是一个简单的布局,类似于盒子,里面有一些内容(标题、小时、描述)。
  • 现在我需要将带有表单、输入等的自定义 html 传递给<tile></tile>

有可能吗?

【问题讨论】:

  • 您想在dashboard 组件中包含title 组件吗? <dashboard> <title></title> </dashboard>?
  • 一些代码会有所帮助。
  • 用更多代码更新帖子,如果可能的话,一个工作的插件

标签: angular


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-01-07
    • 1970-01-01
    • 2019-04-03
    • 2019-07-03
    • 2019-05-29
    • 2018-07-27
    • 2016-12-30
    • 2018-12-11
    相关资源
    最近更新 更多