在Angular 7中,我们可以使用ngIf指令来显示一个元素并隐藏多个元素。以下是一个示例:
HTML模板文件:
这是要显示的元素
这是要隐藏的元素1
这是要隐藏的元素2
Component文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
show: boolean = false;
showElement() {
this.show = true;
}
}
在上面的示例中,我们使用了ngIf指令来控制元素的显示和隐藏。通过点击按钮,调用showElement()方法来显示要显示的元素,并隐藏要隐藏的元素。
需要注意的是,我们使用了相同的条件(!show)来隐藏多个元素。只有当条件为true时,才会显示具有ngIf指令的元素。
此外,我们还可以使用ngStyle或ngClass指令来动态设置元素的样式,以实现显示和隐藏的效果。具体的实现方式取决于您的需求和设计。