Angular 7动态内容投影

Question

我需要能够告诉一个角度分量基于动态数据渲染另一个角度分量。我认为这需要内容投影，但是我只能在简单的情况下使内容投影起作用。

示例场景

我在香草TypeScript中有以下表数据：

const headings = [
  { id: 'cat', label: 'Cat' },
  { id: 'nameIt', label: 'Type the name' }
]

const data = [
  { cat: 'Tabby', nameIt: (name) => updateTabbysName(name) },
  { cat: 'Ginger', nameIt: (name) => updateGingersName(name) },
]

我也有四个Angular组件：

• simple-span在跨度中呈现文本。在这种情况下，它将渲染cat字段。
• text-input呈现文本输入。在这种情况下，它将呈现基本的HTML输入，当用户输入文本时将调用nameIt回调。
• my-special-cat-table将提供headings和data变量，并允许了解text-input和simple-span
• generic-table它负责呈现表DOM元素。不允许知道text-input或simple-span存在。

目的是generic-table完全不了解单元渲染组件

在Angular 7中可以实现吗？

Answer 1

您可以评估使用 NgTemplateOutlet 创建可重用组件。只是一个建议。

看一下这个例子。