Angular 单击事件时显示html模板

我是Angular的新手，我想知道您是否执行以下操作：单击“登录”或“注册”时，显示相应的模板，该模板位于

和

中

这是我的app.component.html

登录
报名

这是app.component.ts

//导入
从'@angular/core'导入{Component}；
//装饰师
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，//您可以在backticks中在此处编写内联html
样式URL:['./app.component.scss']//和css
})
//阶级
导出类AppComponent{
按钮状态：任何；
标题='FindaSitter'；
showloginfo（）{
log（“我被点击了”）；
//显示HTML模板
}

我们可以使用*ngIf使app.component.html文件中的相应模板可见

<button (click)="showLoginForm()">Login</button>
<button type="button" (click)="showSignupForm()">Signup</button>
<app-login *ngIf='login'></app-login>
<app-register *ngIf='signup'></app-register>

---

如果我从开始分配

login=false signup=false

它会给我以下错误：

error TS2322:Type'true'不可分配给Type'false'

，它建议我应该将其声明为布尔值，这样就可以了。所以我在上面编辑了你的代码。是的，你也可以声明为布尔值

export class AppComponent {
buttonState: any;
title = 'FindaSitter';
login:boolean;
signup:boolean;

showLoginForm() {
this.login=true
this.signup=false
console.log("I have been clicked");
}

showSignupForm(){
this.signup=true
this.login=false
}
}