Question

我是Angular的新手，我想知道您是否做了以下操作：点击登录或注册时显示适当的模板，该模板位于<app-login></app-login> and <app-register></app-register>

所以这是我的app.component.ts

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <!--<h1>
    Welcome to {{ title }}!
  </h1>-->
  <img width="300" alt="findasitter" src="/assets/images/findasitter.png">
  <br>
  <button (click)="showLoginForm()">Login</button>
  <button type="button">Signup</button>
  <app-login></app-login>
  <app-register></app-register>
  <router-outlet></router-outlet>
</div>

这是app.component.html

// import
import { Component } from '@angular/core';

// decorator
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // you can write inline HTML here within backticks
  styleUrls: ['./app.component.scss']  // and css here
})
// class
export class AppComponent {
  buttonState: any;
  title = 'FindaSitter';
  showLoginForm() {
    console.log("I have been clicked");
    // show the HTML template
}

Answer 1

我们可以使用* 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>

如果登录变量 true 它将呈现登录模板，否则如果注册变为 true ，它将显示在您的页面中注册模板。

这里我如何在app.component.ts文件中使用该变量

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
}
}

单击事件角度显示html模板

1 个答案: