Angular 用另一个结构指令换行指令

我的AppComponent模板（在AppModule中引导）是

我的指令#{{item}

其中

mySource

是具有

list

属性的对象

mySource = { list: [1, 2, 3, 4, 5] };

因此，将

myDir

替换为

ngFor

（

*ngFor=“let item of mySource.list”

）将使我

我的指令#1
我的指令#2
我的指令#3
我的指令#4
我的指令#5

我正试图将

myDir

与

myComponent

结合起来实现，以便在

ngFor

Angular core指令上提供一个模板包装器，从而能够通过

mySource

（而不是

mySource.list

）并获得相同的结果。当然，最终目标要复杂得多，但我需要用最少的例子来解决这个任务。。。怎么办

my.directive.ts

从“/my.component”导入{MyComponent}；
@指令（{选择器：'[myDir][myDirOf]'}）
导出类MyDirective{
私人来源；
构造函数（/*…*/）{}
@Input（）设置myDirOf（源）{
this.source=源；
}
恩戈尼尼特（）{
//MyComponent动态包装
const templateView=this.templateRef.createEmbeddedView（{}）；
const compFactory=this.resolver.resolveComponentFactory（MyComponent）；
const componentRef=this.viewContainer.createComponent（compFactory，null，this.viewContainer.injector，[templateView.rootNodes]）；
//将MyDir参数传递给Mycomponent的实例
componentRef.instance.source=this.source；
componentRef.instance.template=this.templateRef；
}
}

my.component.ts

@组件({
选择器：“应用程序我的”，
模板：`
`
})
导出类MyComponent实现OnInit{
来源；
模板；
构造函数（）{}
}

问题是我无法将

item

传递回主机组件的模板，因此目前我只得到5行相同的代码，其中包含“我的指令#”，而

{{item}}

不起作用。看起来MyComponent的

ng模板有问题。它接受
模板
，但不会传递
项

我根据我的当前情况创建了一个可编辑列表。此外，以下是我需要的简单图表：

使用
$implicit
将数据传递给
项

my.component.html



你的模板


我的指令#{{item}

相当于


我的指令#{{item}

但如果模板变量（let item）没有值，则默认情况下它采用
$implicit


我的指令#{{item}


另见