在angular中更新Appcomponent中的子组件

Question

在我的应用程序标题中，页脚和侧边栏很常见，中间内容会动态更改。在侧边栏中，我有更多的超链接，它将动态更新中间内容。某些情况下，我想隐藏侧边栏和页脚。

<app-header> <app-header>
<div>
  <app-sidebar> <app-sidebar>
  <app-font> <app-font>
</div>
<app-footer> <app-footer>

谢谢

Answer 1

使用* ngIf角度指令。 还要在模板中包括子组件选择器。

Answer 2

您可以通过多种方式将元素隐藏成角形：

---

您可以使用*ngIf：

<app-header *ngIf="shouldVisible"> <app-header>
...
<app-footer *ngIf="shouldVisible"> <app-footer>

在您的app.component.ts中（假设您将这些选择器放在应用程序组件中）

//Change shouldVisible when you need to
shouldVisible = true;

---

或使用ngClass将css类传递到该组件，这样您就可以在动态设计该组件的样式方面拥有更多控制权：

<app-header [ngClass]="yourClasses"> <app-header>
...
<app-footer [ngClass]="yourClasses"> <app-footer>

//You ca manipulate the class you wish to pass in
yourClasses = ['none']

在页眉和页脚组件样式中，声明这些样式

:host.none {
 display: none;
 /*Or what ever style you want*/
}