传递和显示角度组件5

Question

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

Answer 1

看到一些代码来了解您要完成的工作会很有帮助。

从文档中， @ Input（）

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

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

要在另一个组件内显示另一个组件，请在父组件内引用嵌套组件的选择器。 选择器是组件元数据的一部分

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

app-hero-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教程，以获取有关在其他组件中显示组件的更多信息。

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