angular - 根据状态更改内容

Question

因此，在 Angular 中，我可以创建一个按钮来执行以下操作：

<a (click)="toggleState = !toggleState">Click me</a>

然后我可以使用它来添加/删除某种 div 的类，例如：

<div [ngClass]="toggleState ? 'red-color' : 'green-color'">Some text</a>

使用 CSS：

.red-color {
    color: red
}

.green-color {
    color: green
}

但是，我对 Angular 还很陌生，所以这是我的问题（因为我知道它可以在 React 中完成）：我可以做这样的事情，我实际上改变了内容，而不仅仅是一个类，例如：

{toggleState ?
    
    <div>Content one</div>
:

    <div>Content two</div>
}

标签： angular

Answer 1

是的，使用ngIf指令：

<div *ngIf="toggleState">Content one</div>
<div *ngIf="!toggleState">Content two</div>

您可以像这样更明确地创建 else 块：

<div *ngIf="toggleState; else elseBlock">Content one</div>
<ng-template #elseBlock>
  <div>Content two</div>
</ng-template>

如果您有兴趣了解更多根据组件状态更改 DOM 的方法，可以在此处阅读有关结构指令的更多信息。