NgSwitch 中的 Angular2 自定义组件答案

【问题标题】：Angular2 Custom Component in NgSwitchNgSwitch 中的 Angular2 自定义组件
【发布时间】：2016-06-21 19:24:42
【问题描述】：

我正在尝试根据 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 错误，但自定义组件未链接到我的元素。例如，这是我的带有嵌入式 ngSwitch 的新 ngFor：

 <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>

【问题讨论】：

您的组件上有Config、MVN、Other、...字符串或属性吗？如果它们是字符串，请删除 [] 周围的 ngSwitchWhen
它们是字符串。我已经删除了它们。我会用新的行为更新我的问题。
如果在非模板标签上使用ngSwitch，则需要添加* *ngSwitch="Config"

标签： angular

【解决方案1】：

删除 [] 周围的 ngSwitch 以获取视为字符串的值
添加* 以获得结构指令所需的*ngSwitch，如果它们未添加到<template> 标记中

另见NgSwitch directive

【讨论】：