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'"。

如何在使用angular2单击特定div时启用div？

1 个答案: