Question

我正在尝试根据ngFor循环中的aType.Name值来渲染6个自定义组件中的1个。这是我的切换语法：

 <div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
                <span [ngSwitch]="aType.Name">
                    {{aType.Name}} tab content here
                    <config-resource-editor [application]="application" [ngSwitchWhen]="Config"></config-resource-editor>
                    <mvc-resource-editor [application]="application" [ngSwitchWhen]="MVC"></mvc-resource-editor>
                    <other-resource-editor [application]="application"  [ngSwitchWhen]="Other"></other-resource-editor>
                    <wcf-resource-editor [application]="application"  [ngSwitchWhen]="WCF"></wcf-resource-editor>
                    <web-resource-editor [application]="application"  [ngSwitchWhen]="Web"></web-resource-editor>
                    <webapi-resource-editor [application]="application"  [ngSwitchWhen]="WebAPI"></webapi-resource-editor>
                </span>
   </div>

产生此错误时：ncaught EXCEPTION: Error in ../PosItAdmin/Authorization/Resource/Ng2ApplicationResourceList:24:24 ORIGINAL EXCEPTION: No provider for TemplateRef! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:3776:27) at NoProviderError.AbstractProviderError [as constructor] (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:4307:20) at new NoProviderError (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:4342:20) at ReflectiveInjector_._throwOrNull (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5794:23) at ReflectiveInjector_._getByKeyDefault (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5822:29) at ReflectiveInjector_._getByKey (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5785:29) at ReflectiveInjector_.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5594:25) at ElementInjector.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:9809:52) at ElementInjector.get (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:9809:52) at ReflectiveInjector_._getByKeyDefault (https://localhost/POSITAdmin/Scripts/npmlibs/@angular/core/core.umd.js:5819:28) 我可以在ngSwitch上找到示例，但是他们都没有尝试在switchWhen块中渲染自定义组件。这样做的正确方法是什么？

谢谢！

删除[]并将模板添加到组件元素后，我没有得到js错误，但自定义组件没有链接到我的元素。例如，这是我的新ngFor with embedded ngSwitch：

 <div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
                <span ngSwitch="aType.Name">
                    {{aType.Name}} tab content here
                    <config-resource-editor [application]="application" ngSwitchWhen="Config" template></config-resource-editor>
                    <mvc-resource-editor [application]="application" ngSwitchWhen="MVC" template></mvc-resource-editor>
                    <other-resource-editor [application]="application" ngSwitchWhen="Other" template></other-resource-editor>
                    <wcf-resource-editor [application]="application" ngSwitchWhen="WCF" template></wcf-resource-editor>
                    <web-resource-editor [application]="application" ngSwitchWhen="Web" template></web-resource-editor>
                    <webapi-resource-editor [application]="application" ngSwitchWhen="WebAPI" template></webapi-resource-editor>
                </span>
            </div>

以下是示例组件的样子：

    import {Component, OnInit, Input} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {IApplication, IApplicationFilterData, IResourceType} from './application';
import { ROUTER_DIRECTIVES, Router, RouteParams } from '@angular/router-deprecated';
import { ApplicationService} from './application.service';

@Component({
    selector: 'config-resource-editor',
    template: '<div>Other editor thingy.  {{application.Name}}</div>',
    directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class ConfigResourceEditorComponent implements OnInit {
    @Input() application: IApplication;

    ngOnInit(): void {

    }

}

但组件模板无法呈现。

我没有弄清楚开关语法，但ngIf工作正常。这就是我想要的：

<div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
                <config-resource-editor [application]="application" *ngIf="aType.Name == 'Config'" ></config-resource-editor>
                <mvc-resource-editor [application]="application"  *ngIf="aType.Name == 'MVC'" ></mvc-resource-editor>
                <other-resource-editor [application]="application" *ngIf="aType.Name == 'Other'"></other-resource-editor>
                <wcf-resource-editor [application]="application" *ngIf="aType.Name == 'WCF'"></wcf-resource-editor>
                <web-resource-editor [application]="application" *ngIf="aType.Name == 'Web'"></web-resource-editor>
                <webapi-resource-editor [application]="application" *ngIf="aType.Name == 'WebAPI'"></webapi-resource-editor>
            </div>

Answer 1

删除[]周围的ngSwitch以获取值为trings的值
添加*以获取结构指令所需的*ngSwitch（如果它们未添加到<template>标记

另见NgSwitch directive

NgSwitch中的Angular2自定义组件

1 个答案: