Wie benutzt man ngSwitch in angular2

Question

Seit den letzten zwei Tagen versuche ich ngSwitch in eckigen 2.1.0 zu arbeiten. Aber es scheint unmöglich zu funktionieren.

Ich bekomme immer keinen Provider für NgSwitch. Unten ist mein Code -

Template -

<template [ngSwitch]="buttonSelector"> 
    <a class="btn" [ngClass]="buttonSizeClass" *ngSwitchCase="'link'" href="#"> 
    <span class="btn__text"> 
     <ng-content></ng-content> 
    </span> 
    </a> 
</template> 

Component -

import { Component, OnInit, Input } from '@angular/core'; 


@Component({ 
    selector: 'app-inked-btn', 
    templateUrl: './inked-btn.component.html', 
    styleUrls: ['./inked-btn.component.css'], 
    inputs: ['buttonSize', 'buttonType', "buttonSelector"] 
}) 
export class InkedBtnComponent implements OnInit { 
    public buttonSize: string; 
    public buttonType: string; 
    public buttonSelector: string; 
    public buttonSizeClass: any; 

    constructor() { } 

    ngOnInit() { 
    this.buttonSizeClass = { 
     'btn--lg': this.buttonSize === 'large', 
     'btn--sm': this.buttonSize === 'small', 
     'btn--primary': this.buttonType === 'primary' 
    } 
    } 

} 

Im Folgenden finden Sie Konfiguration meiner Modul -

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { HeaderComponent } from './header/header.component'; 
import { FooterComponent } from './footer/footer.component'; 
import { InkedBtnComponent } from './inked-btn/inked-btn.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule 
    ], 
    declarations: [HeaderComponent, FooterComponent, InkedBtnComponent], 
    exports: [HeaderComponent, FooterComponent, InkedBtnComponent], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 
export class SharedModule { } 

Dieses gemeinsame Modul dann in dem Hauptmodul importiert .

Wo ist das Miss?

Answer 1

https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

ngSwitch kann nicht auf einem <template> Element importieren, nur auf reale Elemente wie <div>

Nur ngSwitchCase kann angewendet werden, um <template> Elemente

<template [ngSwitchCase]="match_expression_3"> 

Alternativ da endgültige ng-container kann statt <template> mit der häufigeren Syntax verwendet werden:

<ng-container *ngSwitchCase="match_expression_3"> 

Answer 2

Sie müssen ngSwitch von angular2/common

import {NgSwitch} from 'angular2/common'