web-dev-qa-db-ja.com

ngSwitchはAngular2でどのように機能しますか？

NgSwitchを この例では として使用しようとしていますが、エラーが発生します。

enter image description here

私のコンポーネント：

  template: `
    <div layout="column" layout-align="center center">   
   <div [ng-switch]="value">
       <div *ng-switch-when="'init'">
     <button md-raised-button class="md-raised md-primary">User</button>
     <button md-raised-button class="md-raised md-primary">Non user</button>

     </div>
  <div *ng-switch-when="0">Second template</div>
  <div *ng-switch-when="1">Third Template</div>
</div>
  </div>`,
    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
 })

私のプランカー -wizard.ts

私は何を取りこぼしたか？ありがとうございました

angularangular2-template
25
Slip

update

https://angular.io/api/common/NgSwitch を参照してください

オリジナル

テンプレートは大文字と小文字が区別されます（beta.47 AFAIR以降）。ディレクティブ（属性）セレクターはキャメルケースに変更されました。たとえば、ng-switchからngSwitchへ。

タグ名は、引き続きWebコンポーネントとの互換性のためにダッシュを使用します。たとえば、<router-link>、<ng-content>などです。

ngSwitchCaseへの詳細

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
</container-element>

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-other-element *ngSwitchDefault>...</some-other-element>
</container-element>
27
Günter Zöchbauer

留意すべき3つのことngSwitch、ngSwitchCase、およびngSwitchDefault。

  1. ngSwitch-modelのproperty valueを設定します。たとえば、viewModeはコンポーネントのプロパティです。

  2. ngSwitchCase-valueのpropertyがngSwitchChangesで定義されている場合にレンダリングするものを定義します。例えばwhen viewMode = 'map'

  3. ngSwitchDefault-valueが一致しない場合にレンダリングするものを定義します。例えばwhen viewMode=undefined。デフォルトはrenderedです。

別の重要なポイントは、[ngSwitchCase]内に<template></template>を設定する必要があるということですHTML要素それ以外の場合は機能しません。 Angularは自動的に<div>タグに変換します。

<div [ngSwitch]="'viewMode'">
  <template [ngSwitchCase]="'map'" ngSwitchDefault> 
     Map View Content...   
   </template>      
   <template [ngSwitchCase]="'list'"> 
      List View Content...
  </template>
</div>

幸運を。

11
Akash

また、サイト上のドキュメントでは見なかった* ngSwitchDefaultもあります。名前が示すように、他のケースに合わない場合はデフォルトでこれになります。

誰かがこれに遭遇した場合、これは主にヘッドアップです。

4
Christopher Whitehead