有什么方法可以在 Angular 中隐藏 app 组件的组件吗？

Question

我正在开发聊天软件 UI。我在 app.component.html 中编写了工具栏。 然后我在单独的组件中编写了登录和注册按钮并路由它们。最初我的主页是这样的。Please click on the link to view the image

当我点击登录或注册时，它将如下所示。 Please click on the link to view the image

登录后，工具栏仍然包含登录和注册按钮，我该如何隐藏这些？下面是我的 app.component.html

`<mat-toolbar class = "tb">
  <span class = "tit">My App</span>
  <span class="example-spacer"></span>
  <button mat-stroked-button class="lb" routerLink = "log">Login</button>
  <button mat-stroked-button class="rb" routerLink = "reg">Register</button>
</mat-toolbar>
<router-outlet></router-outlet>`

下面是我的 app.component.ts 代码

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
}

Answer 1

在元素中简单地设置一个 [hidden]="!show"（登录/注册链接）。

类似： login(){ userService.loggedIn = true; this.show = false; }