要隐藏和显示多个div,可以使用Angular中的ngIf指令和ngSwitch指令。
示例代码如下:
HTML模板:
Div 1
Div 2
Div 3
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
showDiv1: boolean = true;
showDiv2: boolean = true;
showDiv3: boolean = true;
toggleDiv1() {
this.showDiv1 = !this.showDiv1;
}
toggleDiv2() {
this.showDiv2 = !this.showDiv2;
}
toggleDiv3() {
this.showDiv3 = !this.showDiv3;
}
}
HTML模板:
Div 1
Div 2
Div 3
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
selectedDiv: string = 'div1';
selectDiv(div: string) {
this.selectedDiv = div;
}
}
这些示例代码演示了如何使用Angular隐藏和显示多个div,并提供了方法来切换它们的显示状态。