角度自定义组件属性设置

Question

(欢迎任何人重新提出我的问题,我不确定如何说出来)

假设我创建了一个Angular组件,如下所示:

<app-my-test></app-my-test>

如何通过在组件中键入选项来允许用户打开和关闭选项,如下所示:

<app-my-test booleanCheck></app-my-test>

然后在我的.ts文件中,booleanCheck如果他们添加它,我想成为真实,如果他们没有添加它我会是假的.下面是一个可以玩的闪电战.我们的目标是让console.log登录true,如果booleanCheck加入,而false如果不添加它.

https://stackblitz.com/edit/angular-xr3p84?file=src%2Fapp%2Fapp.module.ts

我不希望这个答案请:

<app-my-test booleanCheck="true"></app-my-test>
<app-my-test [booleanCheck]="true"></app-my-test>

Answer 1

您可以leverage在setter的@Input,如果将被称为input是可用的.

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

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: ['./app.test.css']
})
export class TestComponent implements OnInit {
  private _booleanCheck = false;

  @Input()
  set booleanCheck(param) {   // this is setter for booleanCheck input.
    this._booleanCheck = true;
  }

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this._booleanCheck);
  }
}

工作副本在这里 - https://stackblitz.com/edit/angular-9ubmg7

Answer 2

您必须创建一个指令,在主机组件中为您设置属性(请注意,该属性可能不再是@Input):

StackBlitz演示

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: [ './app.test.css' ]
})
export class TestComponent implements OnInit {
  public booleanCheck: boolean;

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this.booleanCheck);
  }
}

@Directive({
   selector: '[booleanCheck]' 
})
export class BooleanCheck {
  constructor(@Host() @Self() @Optional() host: TestComponent) {
      host.booleanCheck = true;
  }
}

(更简单的解决方案,请看这里)