Question

有一种方法可以用x按钮关闭div吗？在这种情况下，div是一个＆＃39;通知＆＃39;出现几秒钟然后消失。我不想使用隐藏，因为显然div永远不会出现。

Answer 1

您可以使用* ngIf结构指令根据布尔值渲染div。你要做的是改变按钮点击的布尔值。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public showNotification: boolean;

  constructor() {
    this.showNotification = true;
    setInterval(() => {
      this.showNotification = true;
    }, 3000);
  }

  public onCloseClick(): void {
    this.showNotification = false;
  }
}

app.component.html

<div>
  <div class="notification" *ngIf="showNotification">
    <div class="close" (click)="onCloseClick()">x</div>
    <div class="content">
        Some content
    </div>
  </div>
</div>

我认为showNotification varible是从服务或其他东西更新的。这就是为什么我使用setTimeInterval来更新showNotifications varible的值。

Answer 2

也许你可以在你的html标签中使用布尔值和* ngIf？因此，每次你想要切换它。

这是一个小例子

<button type="button" (click)="visible = false" >x</button>
<div *ngIf="visible">
<!-- rest of your html tags here -->
</div>

你的组件：

export class YourComponent{
 visible:boolean = true;
}

Angular 2+关闭div与x按钮

2 个答案: