リスト内のオプションに基づいてDivのコンテンツを表示する方法2/4

Question

"divコンテンツを動的に表示するのが面倒" シナリオ： - 私のリストの例で3つのアイテムを持っています{* Menu1 * Menu2 * Menu3} と私は、このメニュー項目ごとに3つの別々のdivの内容を持っています。

要件： - デフォルトではmenu1が表示されるはずです。 をクリックしてmenu2をクリックすると、（menu1、menu3）の内容が非表示になり、メニュー2の内容が表示されます。

どのように私はこの角度2を行うことができますか？私のサンプルコードとpluckerを共有

..

home.component.html

<div class="item-list> 
<div><li (click)="Menu2==false && Menu3==false;">Menu1</li></div> 
<div><li (click)="Menu1==false && Menu3==false;">Menu2</li></iv> 
<div><li (click)="Menu2==false && Menu1==false;">Menu3</li></div> 
<div> 

<div class="information"> 
<div *ngIf="Menu1==true && Menu2==false && Menu3==false ">Menu1 contents goes here</div> 
<div *ngIf="Menu2==true && Menu1==false && Menu3==false ">Menu2 contents goes here</div> 
<div *ngIf="Menu3==true && Menu2==false && Menu1==false ">Menu3 contents goes here</div> 
</div> 

home.ts

export class HomePage { 


    private Menu1:boolean=true; 
    private Menu2:boolean=false; 
    private Menu3:boolean=false; 
} 

plunker

Answer 1

これを試してみてください：

コンポーネント：

import { Component } from 'angular2/core'; 

@Component({ 
    // Declare the tag name in index.html to where the component attaches 
    selector: 'hello-world', 

    // Location of the template for this component 
    templateUrl: 'src/hello_world.html' 
}) 

export class HelloWorld { 
    private home: boolean = true; 
    private about: boolean = false; 
    private contact: boolean = false; 

    showMenu(menuName: string) { 
    let menus = ['home', 'about', 'contact']; 
    menus.splice(menus.indexOf(menuName), 1); 
    for (const menu of menus) { 
     this[menu] = false; 
    }; 
    this[menuName] = true; 
    } 
} 

テンプレート：

<div class="item-list"> 
    <div> 
     <li (click)="showMenu('home')">home</li> 
    </div> 
    <div> 
     <li (click)="showMenu('about')">about</li> 
    </div> 
    <div> 
     <li (click)="showMenu('contact')">contact</li> 
    </div> 
</div> 

<div class="information"> 
    <div *ngIf="home">home</div> 
    <div *ngIf="about">about</div> 
    <div *ngIf="contact">contact</div> 
</div> 

Answer 2

私は最初のリストは、メニューの選択であると仮定し、

あなたは（クリック）= "メニュー2 == false" に持っていた場合には> 、それは比較です、あなたはMenu2の値を設定していません。

以下は、あなたがやりたいことになります。また

<ul> 
    <li (click)="Menu2=false; Menu3=false; Menu1=true">Menu1</li> 
    <li (click)="Menu1=false; Menu3=false; Menu2=true">Menu2</li> 
    <li (click)="Menu2=false; Menu1=false; Menu3=true">Menu3</li> 
</ul> 

<div *ngIf="Menu1 && !Menu2 && !Menu3">1</div> 
<div *ngIf="Menu2 && !Menu1 && !Menu3">2</div> 
<div *ngIf="Menu3 && !Menu1 && !Menu2">3</div> 

を、私はあなたがあなたのLIの