在 Angular 中,可以使用 ngIf 指令来实现条件渲染。这个指令可以根据表达式的值(true 或 false)来决定是否显示对应的 HTML 元素。下面是一个示例:
HTML 代码:
Button is hidden
TypeScript 代码:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Button is hidden
`,
})
export class AppComponent {
public showButton = true;
public toggleButton() {
this.showButton = !this.showButton;
}
public hideButton() {
this.showButton = false;
}
public showButton() {
this.showButton = true;
}
}
在上面的示例中,我们在组件中定义了一个变量 showButton,初始值为 true。然后,在模板中使用两个 ngIf 指令来根据这个变量的值来渲染对应的 HTML 元素。
我们还定义了三个方法来根据用户的操作来修改 showButton 的值,从而实现了动态的条件渲染。