在Angular 9中,可以使用*ngIf指令来根据条件显示/隐藏HTML内容。以下是一个示例代码:
在组件的HTML模板中,使用*ngIf指令来根据条件显示/隐藏内容:
在组件的TypeScript文件中,声明一个变量,并在需要时更新它来控制内容的显示/隐藏:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
showContent: boolean = false;
ngOnInit() {
// 模拟内容加载
setTimeout(() => {
this.showContent = true;
}, 3000);
}
}
在上面的示例中,初始化时showContent
变量被设置为false
,因此内容开始时是隐藏的。然后,在ngOnInit()
方法中,通过setTimeout()
函数模拟内容加载,并在3秒后将showContent
变量设置为true
,以显示内容。
请注意,在实际应用中,您可以根据您的需求来更新showContent
变量。此示例只是一个简单的示例来说明如何在内容加载后显示/隐藏HTML内容。
上一篇:Angular9 多选框删除
下一篇:Angular9 路由器导航