Angular - 点击后显示额外的 div答案

【问题标题】：Angular - show additional div after clickAngular - 点击后显示额外的 div
【发布时间】：2018-10-21 00:39:21
【问题描述】：

我会制作一些带有额外 div 的按钮，就像照片中一样。重要的是黄色框不能移动元素。请问您能帮忙吗？

【问题讨论】：

尝试使用primefaces.org/primeng/#/overlaypanel库

标签： angular css typescript

【解决方案1】：

这个 stackblitz 示例可以满足您的需要。

https://stackblitz.com/edit/angular-cnbzuv?embed=1&file=src/app/app.component.ts

HTML

<button style="float: right;" (click)="clicked()">click me</button>
  <div *ngIf="buttonClicked" style="clear:both; with:100%; text-align: center; padding:10vh; border-style: solid; border-color: yellow;">Div content here</div>

组件

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

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

  clicked(){
    this.buttonClicked = !this.buttonClicked;
  }
}

【讨论】：

如果按钮距离右侧有特定距离怎么办？
我会鼓励你研究基本的 html 样式。如果此答案为您的原始问题提供了解决方案，请将其标记为此类。如果您需要其他帮助，请提出一个新问题。