Question

我正在尝试根据值的更改时间启用和禁用按钮。话虽如此，我创建了一个模型，看起来可能像这样：

export class Model{
    label:string='';
    isEnabled:Function=()=>true;
}

component1可能类似于：

@Component({
    selector:'c1',
    template:`
     <button class="btn btn-default> [ngModel]="{'disabled':model.isEnabled()}">{{label}}</button>
    `
})
export class Component1{
   @Input() model:Model;
}

Component2可能类似于：

@Component({
selector:'c2',
template:`
 <button class="btn btn-default" (click)="onClick()">Click me</button>
 <c1 [model]=model></c1>
`
})
export class Component2 implements OnInit{
  enabled:boolean=false;
  model:Model;

  ngOnInit(){
   this.model = new Model();
   model.label = "Something Cool";
   model.isEnabled = ()=> this.enabled;
  }

  onClick(){
     this.enabled = !this.enabled;
  }
}

理想情况下，当我单击第一个按钮时，第二个按钮将启用。

所以我的问题是该函数从不触发，并且c1按钮从不禁用。谁能告诉我为什么不会发生这种情况？

Answer 1

尝试这样的事情：

export class Model{
    label:string='';
    isEnabled:boolean:true;
}

组件1：

@Component({
    selector:'c1',
    template:`
     <button class="btn btn-default" [disabled]="!model.isEnabled">{{model.label}}</button>
    `
})
export class Component1{
   @Input() model:Model;
}

组件2：

export class Component2 implements OnInit{
  enabled:boolean=false;
  model:Model;

  ngOnInit(){
   this.model = new Model();
   this.model.label = "Something Cool";
   this.model.isEnabled = false;
  }

  onClick(){
     this.model.isEnabled = !this.model.isEnabled;

  }
}

无论如何，您都应该阅读基本的角度教程：）

将一个函数传递给另一个组件，它不会运行

1 个答案: