typescript – 在动态渲染时更改角度2中子组件的顺序
发布时间：2020-12-17 16:55:29 所属栏目：安全 来源：网络整理
导读：我对角度2世界有点新意,所以请原谅我这是一个天真的问题. 我想读一个json文件,其中包含我需要为页面显示的各种组件的元数据. 我需要读取这个json并按照它们在此处列出的顺序呈现子组件. 我已经成功使用了角度2提供的动态组件加载器API来动态加载for循环中的
|
我对角度2世界有点新意,所以请原谅我这是一个天真的问题.
我想读一个json文件,其中包含我需要为页面显示的各种组件的元数据. 我需要读取这个json并按照它们在此处列出的顺序呈现子组件. 我已经成功使用了角度2提供的动态组件加载器API来动态加载for循环中的子组件.但是,还有一些其他要求使得使用此API有点复杂. 所以我正在寻找另一种方法来做同样的事情.这就像在父组件的ts文件中操作DOM一样,以按照JSON中提到的顺序获取子组件. 任何线索都会非常有帮助. PS：抱歉没有发布代码.我用我的手机发布了这个. 解决方法
如果你不想使用DynamicComponentLoader(不赞成使用具有相同限制的ViewContainerRef.createComponent()),我只看到使用包装所有可能组件的元素并仅呈现所选组件的选项
@Component({
selector: 'wrapper-component',directives: [Cmp1,Cmp2,Cmp3,... Cmp10],template: `
<div [ngSwitch]="type">
<cmp1 *ngSwitchCase="'cmp1'"></cmp1>
<cmp2 *ngSwitchCase="cmp2"></cmp2>
<cmp3 *ngSwitchCase="cmp3"></cmp3>
....
<cmp10 *ngSwitchCase="cmp4"></cmp4>
<div *ngSwitchDefault>not supported</div>
</div>
`})
export class WrapperComponent {
@Input() type:string;
}
并使用它 @Component({
selector: 'parent-cmp',template: `
<wrapper-component *ngFor="let item of someJson" [type]="item.componentName"></wrapper-component>
`})
export class ParentComponent {
someJson; // assign the JSON here
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |