Question

（抱歉我的英文，它不是我的第一语言......）

当我用模板调用它时，我在组件中注入的一些输入参数存在一些问题。

slider-multiple.component.ts：

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

@Component({
  selector: 'slider-multiple',
  templateUrl: './slider-multiple.component.html'
 })
export class SliderMultipleComponent  {
   @Input() public modifiable: boolean;
 }

slider-multiple.component.html：

<button *ngIf="modifiable">Slider Button</button>

调用该指令（例如在app.component.html上）：

<slider-multiple modifiable="activation"></slider-multiple>

在app.component.ts上定义激活：

export class AppComponent  {
   public activation : boolean = false ;

   public activate(){
     this.activation = !this.activation;
   }
 }

只有当指令的激活参数为true时，我在组件的html模板上定义的按钮才能显示（通过* ngIf）。

有谁知道为什么它不按预期工作？

要Stackblitz帮忙。

提前致谢！

Answer 1

更改<slider-multiple modifiable="activation"></slider-multiple>

至<slider-multiple [modifiable]="activation"></slider-multiple>

modifiable="activation"绑定到值为activation的字符串。

[modifiable]="activation"绑定到名为activation的组件属性。

Angular：@input boolean和ngIf不匹配

1 个答案: