angular - Angular - 点击后显示额外的 div

Question

我会用照片中的其他 div 制作一些按钮。重要的是黄色框不能移动元素。请问你能帮忙吗？

标签： angularcsstypescript

Answer 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;
  }
}