如何使用angular2單擊特定div時啓用div？

Question

這是我的組件。

<div class="search-dropdown calender-dropdown "> 
     <div class="search-dropdown-tabs-wrp"> 
      <ul class="search-dropdown-tabs"> 
       <li> 
        <a class="search-dropdown-tabs-active">Today</a> 
       </li> 
       <li> 
        <a>Tomorrow</a> 
       </li> 
       <li> 
        <a>This weekend</a> 
       </li> 
       <li> 
        <a>This week</a> 
       </li> 
       <li> 
        <a>Next week</a> 
       </li> 
       <li> 
        <a>This month</a> 
       </li> 
      </ul> 
     </div> 
     <div class="tab-content-area"> 
      <ul class="tab-content-area-active"> 
       <div class="row"> 
        this is the first tab 
       </div> 
      </ul> 
     </div> 
</div> 

component.ts

import { Component, Output,EventEmitter} from '@angular/core'; 
@Component({ 
    moduleId:module.id, 
    selector: 'calendar', 
    templateUrl: './calendar.component.html' 
}) 
export class CalendarComponent{ 
    @Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>(); 
    public fromDate:Date = new Date();  
    public toDate:Date = new Date(); 
    public closed : boolean; 
    private events:Array<any>; 
    private tomorrow:Date; 
    dates = { startDate: this.fromDate, endDate: this.toDate , closed : this.closed}; 
    private afterTomorrow:Date; 
    private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; 
    private format = this.formats[0]; 
    private dateOptions:any = { 
    formatYear: 'YY', 
    startingDay: 1 
    }; 
    private opened:boolean = false; 

    public pickDate(): void { 
    this.dates = { startDate: this.fromDate, endDate: this.toDate , closed : false}; 
    this.onDatePicked.emit(this.dates); 
} 
    public closeComponent() : void{ 
    this.dates.closed = true; 
    } 

如何啓用第二個選項卡內容被點擊時，明天？

Answer 1

component.ts

import { Component, Output,EventEmitter} from '@angular/core'; 
@Component({ 
    moduleId:module.id, 
    selector: 'calendar', 
    templateUrl: './calendar.component.html' 
}) 
export class CalendarComponent{ 
    @Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>(); 
    public fromDate:Date = new Date();  
    public toDate:Date = new Date(); 
    public status: string = "today" 
    public closed : boolean; 
    private events:Array<any>; 
    private tomorrow:Date; 
    dates = { startDate: this.fromDate, endDate: this.toDate , closed : this.closed}; 
    private afterTomorrow:Date; 
    private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate']; 
    private format = this.formats[0]; 
    private dateOptions:any = { 
    formatYear: 'YY', 
    startingDay: 1 
    }; 
    private opened:boolean = false; 

    public pickDate(): void { 
    this.dates = { startDate: this.fromDate, endDate: this.toDate , closed : false}; 
    this.onDatePicked.emit(this.dates); 
} 
    public closeComponent() : void{ 
    this.dates.closed = true; 
    } 

component.html

<div class="search-dropdown calender-dropdown "> 
     <div class="search-dropdown-tabs-wrp"> 
      <ul class="search-dropdown-tabs"> 
       <li> 
        <a (click)="status='today'" class="search-dropdown-tabs-active">Today</a> 
       </li> 
       <li> 
        <a (click)="status='tomorrow'">Tomorrow</a> 
       </li> 
       <li> 
        <a>This weekend</a> 
       </li> 
       <li> 
        <a>This week</a> 
       </li> 
       <li> 
        <a>Next week</a> 
       </li> 
       <li> 
        <a>This month</a> 
       </li> 
      </ul> 
     </div> 
     <div class="tab-content-area"> 
      <ul class="tab-content-area-active" *ngIf="status=='today'"> 
       <div class="row"> 
        this is the first tab 
       </div> 
      </ul> 
      <ul class="tab-content-area-active" *ngIf="status=='tomorrow'"> 
       <div class="row"> 
        this is the second tab 
       </div> 
      </ul> 
     </div> 
</div> 

在保留有關要顯示什麼樣的數據，您可以創建一個變量。你可以做類似(click)="state='tomorrow'"。在您的模板中，您可以使用*ngIf來顯示或隱藏某些部分，如*ngIf="state=='tomorrow'"。