कोणीय 2

Question

में ngSwitch का उपयोग कैसे करें पिछले दो दिनों से मैं कोणीय 2.1.0 में काम करने के लिए ngSwitch प्राप्त करने का प्रयास कर रहा हूं। लेकिन यह काम पाने के लिए असंभव लगता है।

मुझे हमेशा NgSwitch के लिए कोई प्रदाता नहीं मिलता है। नीचे मेरी कोड है -

खाका -

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

घटक -

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

यह साझा मॉड्यूल फिर मुख्य मॉड्यूल में आयात किया जाता है -

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

} 

नीचे मेरी मॉड्यूल विन्यास है ।

मिस कहां है?

Answer 1

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

ngSwitch केवल तरह <div>

केवल ngSwitchCase असली तत्वों पर एक <template> तत्व पर नहीं किया जा सकता, लागू किया जा सकता करने के लिए <template> से ngSwitch आयात करने की आवश्यकता तत्व

<template [ngSwitchCase]="match_expression_3"> 

वैकल्पिक रूप से के बाद से अंतिम ng-container अधिक आम वाक्य रचना के साथ <template> के बजाय इस्तेमाल किया जा सकता:

<ng-container *ngSwitchCase="match_expression_3"> 

Answer 2

आप angular2/common

import {NgSwitch} from 'angular2/common'