Question

我有一个带有两个标签的标签导航元素，它需要根据点击的标签显示一个组件并隐藏另一个组件。如果单击的选项卡已经处于活动状态＆＃34;，则组件需要保持显示状态。

我有这个工作，但对我来说似乎效率很低。谁能告诉我更好的方法吗？

以下是我现在的设置方式。为了不在问题中发布每个文件，请知道项目设置正确。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button type="button" (click)="changeShowStatus(oneShowing=true,twoShowing=false)">1</button>
      <button type="button" (click)="changeShowStatus(twoShowing=true,oneShowing=false)">2</button>
      <div class="box1" *ngIf="oneShowing">
        <p>some content</p>
      </div>
      <div class="box2" *ngIf="twoShowing">
        <p>some content2</p>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  oneShowing:boolean;
  twoShowing:boolean

  constructor() {
    this.oneShowing = true;
    this.twoShowing = false
  }
}

Plunker

Answer 1

＆＃13;

@Component({
  selector: 'my-app',
  template: `
     <div>
  <button type="button" (click)="activeIndex = 1">1</button>
  <button type="button" (click)="activeIndex = 2">2</button>
  <div class="box1" *ngIf="activeIndex === 1">
    <p>some content</p>
  </div>
  <div class="box2" *ngIf="activeIndex === 2">
    <p>some content2</p>
  </div>
</div>
  `,
})
export class App {
  activeIndex = 0;

  constructor() {
  }
}

＆＃13;

Answer 2

这是另一种方法。

1.将currentContent变量初始化为默认内容值。

2.单击按钮将其值设置为所需内容。

3.如果currentContent匹配desiredValue，则显示div。

@Component({
    selector: 'my-app',
    template: `
    <div>
      <button type="button" (click)="currentContent='content1'">1</button>
      <button type="button" (click)="currentContent='content2'">2</button>
      <div class="box1" *ngIf="currentContent==='content1'">
        <p>some content</p>
      </div>
      <div class="box2" *ngIf="currentContent==='content2'">
        <p>some content2</p>
      </div>
    </div>
  `,
})
export class App {
    name: string;
    currentContent: string = "content1"; //default tab

    constructor() {

    }
}

Answer 3

另一种方法是使用brodcasting事件。在此创建一个可观察的brodcaster和brodcast消息，以便在任何一个弹出窗口即将打开时关闭其他弹出窗口。 https://blog.lacolaco.net/post/event-broadcasting-in-angular-2/在网页上存在多个日期选择器或下拉列表时使用它，并且需要一次打开一个。我使用它，非常有助于制作评论类型的下拉列表。

切换两个元素之间的显示和隐藏

3 个答案: