传递和显示角度5的组件

Question

我有一个场景，我需要将不同“组件”的列表传递给另一个角度组件。我使用@Input将组件列表作为数组传递。如何在HTML中呈现这些组件？

Answer 1

看一些代码可以帮助您了解自己想要实现的目标。

从文档中@Input()

• Input属性是使用@Input装饰器注释的可设置属性。当值与属性绑定
绑定时，值将流入属性

@Input()注释用于传递数据。它不用于将组件传递给另一个组件。

要在另一个组件中显示另一个组件，请引用父组件内的嵌套组件选择器。选择器是component metadata

的一部分

• selector：一个CSS选择器，它告诉Angular在模板HTML中找到相应标记的位置创建并插入此组件的实例。例如，如果应用程序的HTML包含，则Angular会在这些标记之间插入HeroListComponent视图的实例。

应用英雄-list.component.ts

创建一个组件并在元数据中提供一个选择器。

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

<强> app.component.html

然后，您可以将该选择器作为另一个组件模板中的一对HTML标记引用。

<app-hero-list></app-hero-list>

查看上面引用的组件元数据链接和Angular Tutorial，了解有关在其他组件中显示组件的更多信息。

如果您需要更详细的答案，请使用代码示例更新您的问题。