我需要能够根据动态数据告诉一个Angular组件去渲染另一个Angular组件。我认为这需要内容投影,但我只能在简单的情况下让内容投影起作用。
示例场景
我有以下纯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
用于在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中是否可以实现?