要实现“点击后显示额外的div”的功能,可以使用Angular的指令和事件绑定。
首先,在HTML中定义一个按钮和一个要显示/隐藏的div,如下所示:
额外的div内容
接下来,在组件的typescript文件中,定义一个变量来控制div的显示/隐藏状态,并编写一个方法来切换该状态,如下所示:
import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  showDiv: boolean = false;
  toggleDiv() {
    this.showDiv = !this.showDiv;
  }
}
在上述代码中,showDiv变量用于控制div的显示/隐藏状态。toggleDiv()方法会在按钮点击时被调用,通过对showDiv变量进行取反来切换div的显示状态。
最后,将ExampleComponent添加到你的模块中,并在页面中使用该组件,如下所示:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example/example.component';
@NgModule({
  declarations: [
    AppComponent,
    ExampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
这样,当点击按钮时,额外的div就会显示或隐藏。