为什么此应用程序转换组和应用程序转换组项自定义组件不能在angular8中工作（与angular2一起工作）？

我在angular8中创建了一个自定义组件，它将一些列表项混洗。我不断得到错误：

Can't bind to 'app-transition-group' since it isn't a known property of 'ul'. 

我怎样才能避开这件事

我在angular8应用程序中有一个transition-group.ts文件：

从'@angular/core'导入{Component，ContentChildren，Directive，ElementRef，Input，QueryList}；
@指示({
选择器：“[应用程序转换组项目]”
})
导出类TransitionGroupItemDirective{
prevPos：任何；
newPos：任何；
el:HTMLElement；
移动：布尔；
移动回调：任何；
构造函数（elRef:ElementRef）{
this.el=elRef.nativeElement；
}
}
@组成部分({
选择器：“[应用程序转换组]”，
模板：“”
})
导出类TransitionGroupComponent{
@输入（'app-TRANSTATION-group'）类；
@ContentChildren（TransitionGroupItemDirective）项：QueryList；
ngAfterContentInit（）{
此。刷新位置（“prevPos”）；
this.items.changes.subscribe（items=>{
items.forEach（item=>{
item.prevPos=item.newPos | | item.prevPos；
});
items.forEach（this.runCallback）；
此。刷新位置（“新位置”）；
items.forEach（此为applyTranslation）；
//强制回流以使所有部件就位
常量偏移=document.body.offsetHeight；
this.items.forEach（this.runTransition.bind（this））；
})
}
runCallback（项：TransitionGroupItemDirective）{
if（item.moveCallback）{
item.moveCallback（）；
}
}
runTransition（项：TransitionGroupItemDirective）{
如果（！item.moved）{
返回；
}
const cssClass=this.class+'-move'；
设el=item.el；
let style:any=el.style；
el.classList.add（cssClass）；
style.transform=style.webkitttransform=style.transitionDuration=''；
el.addEventListener（'transitionend'，item.moveCallback=（e:any）=>{
if（！e | |/transform$/.test（e.propertyName））{
el.removeEventListener（'transitionend'，item.moveCallback）；
item.moveCallback=null；
el.classList.remove（cssClass）；
}
});
}
刷新位置（道具：字符串）{
this.items.forEach（item=>{
item[prop]=item.el.getBoundingClientRect（）；
});
}
applyTranslation（项：TransitionGroupItemDirective）{
item.moved=false；
常量dx=item.prevPos.left-item.newPos.left；
const dy=item.prevPos.top-item.newPos.top；
if（dx | | dy）{
item.moved=true；
let style:any=item.el.style；
style.transform=style.webkitttransform='translate（'+dx+'px'，+dy+'px'）；
style.transitionDuration='0s'；
}
}
}

在我的app.module.ts文件中，我有：

从“/transition group”导入{TransitionGroupComponent，TransitionGroupItemDirective}；

并确保在声明中包含TransitionGroupComponent和TransitionGroupItemDirective

在我的app.component.ts文件中，我有：

@组件({
选择器：“我的应用程序”，
模板：`
物品使用Angular8 ngFor重新排序/洗牌动画
配置


{{item}}


`,
})
导出类应用程序{
项目=[1,2,3,4,5,6,7,8,9]；
洗牌{
this.items=this.shufflestuff（this.items）
}
}
shufflestuff=函数（数组）{
const length=array==null？0:array.length
如果（！长度）{
返回[]
}
设索引=-1
const lastIndex=长度-1
const result=this.copyArray（数组）
而（++索引<长度）{
const rand=index+Math.floor（Math.random（）*（lastIndex-index+1））
常量值=结果[rand]
结果[rand]=结果[索引]
结果[索引]=值
}
返回结果
}
copyArray=函数（源，数组）{
设索引=-1
常量长度=source.length
数组| |（数组=新数组（长度））
而（++索引<长度）{
数组[索引]=源[索引]
}
返回数组
}

请参见工作现场演示：

改为：

@指令({
选择器：“[转换组]”
})
导出类TransitionGroupComponent{
@输入（“过渡组”）类；
// ...
}