Angular 角度模板引用和未定义的类变量

我正在尝试在我的Angular component中使用

TemplateRef

s，这样包的用户就可以从组件中获益，但可以自己定义样式。我正在处理的组件是，从

角度标记选择
包。它获取一个潜在“标签”列表，并允许用户从列表中选择某些标签。目前，您仅限于默认样式，并且必须传入所有链接类，因此很难覆盖样式。通过使用
ng template
和
TemplateRef
，您可以获得标记选择的所有好处，在
TagSelect
组件中处理逻辑，但您可以决定布局

通过在
TagSelect
组件中添加以下内容，我认为我已经有了一个良好的开端：

<ng-container *ngTemplateOutlet="layoutTemplate; context: ctx"></ng-container>

我基本上是将组件的所有
@Input
变量和本地类变量放在上下文对象上。当我弄清楚到底需要什么和不需要什么的时候，我会仔细检查并解决这个问题

TagSelect
组件上的输入之一是可以选择的可能标签列表。我提供了一个可能的标签数组供选择，虽然我可以确认它已传递到组件，但它不会输出到父组件以在屏幕上列出。如果我用一个项目预先填充
TagSelect
组件中的可能标记列表，那么我
可以在父组件中看到那些预填充的项，但不能看到传入的项。此外，在父组件中切换标记时，会出现错误，因为我们将所选标记保存到的数组是
未定义的
。但该数组在组件初始化时默认为空数组

就像组件被初始化，但是所有类变量的状态都丢失了；我不知道该怎么解释

我知道这可能真的很混乱，但我正在测试这个功能。如果您有任何问题需要我澄清，请告诉我，但这正是我目前的重点。
以下是您需要的：

toggleTag = (tag: Tag) => {

您正在使用：

toggleTag(tag: Tag) {

问题是，当您将
toggleTag
函数传递到
ctx
对象时，
此
不再绑定到
TagSelectComponent
。使用箭头函数自动为您绑定
此

这是一个修改过的

编辑：

您还需要在值更改时随时更新
ctx
属性。我添加了一个
updateContext（）
函数，并在
ngochanges
的末尾调用它。您可以进行一些性能调整，以便仅在特定输入更改时调用它

toggleTag(tag: Tag) {