如何解决动态组件加载-将组件作为变量获取
我正在Angular中实现一个相对复杂的component loader,并且我想从rxjs存储中动态获取组件实例。
loadEditAreaComponent(component: any,componentInstanceData?: {}){
const componentFactory = this.cfr.resolveComponentFactory(component);
const viewContainerRef = this.editAreaHost.viewContainerRef;
const componentRef = viewContainerRef.createComponent(componentFactory);
Object.keys(componentInstanceData).forEach(key => {
componentRef.instance[key] = componentInstanceData[key];
})
有效。但是,我觉得any
在这里有点草率。我似乎找不到正确的类型。
resolveComponentFactory
的签名是
(method) ComponentFactoryResolver.resolveComponentFactory<unkNown>(component: Type<unkNown>): ComponentFactory<unkNown>
。
当我说component: Type
时,我得到:
Argument of type 'Type' is not assignable to parameter of type 'Type<unkNown>'.
当我说component: Type<unkNown>
或Type<any>
时,我得到:
Type 'Type' is not generic.
不胜感激,也希望获得一些有关Typescript约束的背景知识,我可能无法理解。
谢谢!
解决方法
resolveComponentFactory方法的签名如下:
export const PlacementsForm = () => {
const [placementData,setPlacementData] = useState([
{ key: 1,name: 'Long side panel',value: 10 },{ key: 2,name: 'Custom wrap',value: 0 },{ key: 3,name: 'Seatback',{ key: 4,name: 'Full wrap',value: 20 },{ key: 5,name: 'Driver’s cabin',{ key: 6,name: 'Stop side panel',{ key: 7,name: 'Max Parade',value: 60 },{ key: 8,name: 'Parade',{ key: 9,name: 'Full rear',value: 70 },{ key: 10,name: 'Rear panel',]);
const handleSliderChange = (event) => {
setPlacementData({
...placementData,[event.target.name]: event.target.value,});
};
const handleInputChange = (event,idx) => {
const usedSlider = event.target;
setPlacementData(() => placementData.map((item,i) => usedSlider.value));
};
// const handleInputChange = (event) => {
// setPlacementData(
// event.target.value === '' ? '' : Number(event.target.value)
// );
// };
// const handleSliderChange = (name) => (event) => {
// // placementData[index] = event.target.value;
// // setPlacementData([...placementData]);
// setPlacementData({ [name]: event.target.value });
// };
// const handleInputChange = (name) => (event,value) => {
// // placementData[index].value = event.target.value;
// // setPlacementData([...placementData]);
// setPlacementData({ [name]: value });
// };
console.log('placementData',placementData);
return (
<SliderContainer>
<Grid>
<Row>
{placementData.map((option) => (
<Col xs={6} md={6} key={option.name}>
<SliderTitle>{option.name}</SliderTitle>
<SliderItem key={option.key}>
<MatGrid item xs>
<Slider
value={typeof option.value === 'number' ? option.value : 0}
onChange={handleSliderChange}
aria-labelledby="input-slider"
valueLabelDisplay="auto"
/>
</MatGrid>
<MatGrid item>
<Input
name={option.name}
style={{ width: '50px',paddingLeft: 15 }}
value={option.value}
margin="dense"
onChange={handleInputChange}
// onBlur={handleBlur}
inputProps={{
step: 10,min: 0,max: 100,type: 'number','aria-labelledby': 'input-slider',}}
/>
</MatGrid>
</SliderItem>
</Col>
))}
</Row>
</Grid>
</SliderContainer>
);
};
您应该使用相同的类型:
abstract resolveComponentFactory<T>(component: Type<T>): ComponentFactory<T>;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。