Question

我的方案是我想在*ngFor中动态地向页面添加内容并让组件呈现。如果我直接添加组件，它们将正确呈现，因此我知道我拥有所有正确的导入等。当我添加一个集合并在循环中添加定义时，如果我检查页面但是它们不渲染组件，我可以看到它们。

我尝试了各种生命周期事件，对其他问题提出了一些建议，但没有取得任何进展。

感谢任何帮助。

@Component({
    selector: 'case-based-search-navigation',
    directives: [NgClass, ROUTER_DIRECTIVES, ClinicalComponent],
    template: 
 `
<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav clearfix">
    <li *ngFor="#item of navigationItems" [ngClass]="item"></li>
</ul>
`,
})

export class NavigationComponent {
    public navigationItems : Array<string> = [];

    constructor() {
       this.navigationItems.push('clinical');
    }
}

@Component({
    selector : '.clinical',
    directives : [ROUTER_DIRECTIVES],
    template: 
`
test loading components
`
})

export class ClinicalComponent {

}

Answer 1

我认为默认情况下它不会添加它，因为它没有检测到变化。你必须创建一个新的navigationItems数组，它将重新渲染它。

Answer 2

最终，这需要使用DynamicComponentLoader。最理想的解决方案不起作用。下面将呈现组件没有任何角度绑定，如点击或路由器链接。在*ngFor中，我使用ngClass值构建了正确的输出。希望这是一个错误，因为这是一个比工作更清晰的解决方案。

 ngOnInit () {
        this.navigationService.navigationSections.forEach((item) => {
             this.dynamicComponentLoader.loadAsRoot(item.type, '.' + item.key, this.injector);
        })
    }

以下代码可以动态加载项目。

@Component({
    selector: 'case-based-search-navigation',
    directives: [ROUTER_DIRECTIVES],
    template:
    `
<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav clearfix">
  <div #sidebar></div>
</ul>
`,
})

export class NavigationComponent {

    constructor(      
        private navigationService: NavigationService,
        private elementRef: ElementRef,
        private dynamicComponentLoader: DynamicComponentLoader) {

    }

    ngOnInit() {
        this.navigationService.navigationSections.forEach((item) => {
            this.dynamicComponentLoader.loadIntoLocation(item.type, this.elementRef, 'sidebar');
        })
    }
}

组件添加到另一个组件中。这里的想法是将根据用户偏好加载组件列表。

是否可以在angular2中的* ngFor中添加指令？

2 个答案: