1. ホーム
  2. angular

[解決済み] ディレクティブ@Inputを必須にする

2023-05-02 22:02:30

質問

AngularJsでは、ディレクティブの属性を必須にすることができました。Angularで@Inputを使用してどのようにそれを行うのですか?ドキュメントには記載されていません。

例えば

@Component({
  selector: 'my-dir',
  template: '<div></div>'
})
export class MyComponent {
  @Input() a: number; // Make this a required attribute. Throw an exception if it doesn't exist.
  @Input() b: number;
}

どのように解決するのですか?

チェックイン ngOnInit() (コンストラクタ実行時には入力はまだ設定されていません) 属性に値があるかどうかを確認します。

Component({
    selector: 'my-dir',
    template: '<div></div>'
})
export class MyComponent implements OnInit, OnChanges {
    @Input() a:number; // Make this a required attribute. Throw an exception if it doesnt exist
    @Input() b:number;

    constructor(){
    }

    ngOnInit() {
       this.checkRequiredFields(this.a);
    }

    ngOnChanges(changes) {
       this.checkRequiredFields(this.a);
    }

    checkRequiredFields(input) {
       if(input === null) {
          throw new Error("Attribute 'a' is required");
       }
    }
}

また ngOnChanges(changes) {...} に値が設定されていない場合は null . また https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html