如何在Angular 2组件中点击时改变布尔值

Question

我该如何将按钮连接到下面指令中的[codeOnly]值以更改它们的值？

我正在使用TypeScript中的Angular 2.4.10。

<button class="btn btn-primary">
     Click me to change all of the [codeOnly] values below to true
</button>

<app-header [codeOnly]='false'></app-header>

<app-power-bi-wrapper [codeOnly]='false'></app-power-bi-wrapper>

<app-power-bi-wrapper-mobile [codeOnly]='false'></app-power-bi-wrapper-mobile>

<app-page-title [codeOnly]='false'></app-page-title>

<app-page-title-nav [codeOnly]='false'></app-page-title-nav>

- es06x

---

你需要使用相同的变量来传递给它们两个。 - Seiyria

Answer 1

在包含你的HTML的组件中添加：

isFoo:boolean = false;

然后将HTML更改为

<button class="btn btn-primary" (click)="isFoo = true" >
     Click me to change all of the [codeOnly] values below to true
</button>

<app-header [codeOnly]='isFoo'></app-header>

<app-power-bi-wrapper [codeOnly]='isFoo'></app-power-bi-wrapper>

<app-power-bi-wrapper-mobile [codeOnly]='isFoo'></app-power-bi-wrapper-mobile>

<app-page-title [codeOnly]='isFoo'></app-page-title>

<app-page-title-nav [codeOnly]='isFoo'></app-page-title-nav>

或者切换

<button class="btn btn-primary" (click)="isFoo = !isFoo" >
     Click me to change all of the [codeOnly] values below to true
</button>

- Günter Zöchbauer

---

不太确定你的意思。isFoo = !isFoo 只是在每次点击事件中在 true 和 false 之间切换 isFoo。 - Günter Zöchbauer