Angular 2使指令需要@Input

Question

在Angular 1中,我们可以创建一个指令属性.我们如何使用@Input在Angular 2中做到这一点？文档没有提到它.

例如.

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

  constructor(){

  }
}

Answer 1

签入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

Answer 2

这是我的getter/setter解决方案.恕我直言,这是一个更优雅的解决方案,因为一切都在一个地方完成,这个解决方案不需要OnInit依赖.

解决方案#1

Component({
  selector: 'my-dir',
  template: '<div></div>'
})
export class MyComponent {
  @Input()
  get a () { throw new Error('Attribute "a" is required'); }
  set a (value: number) { Object.defineProperty(this, 'a', { value, writable: true, configurable: true }); }
}

解决方案#2:

使用装饰器可以更轻松地完成它.所以,你在应用程序中定义一次像这样的装饰者:

function Required(target: object, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    get () {
      throw new Error(`Attribute ${propertyKey} is required`);
    },
    set (value) {
      Object.defineProperty(target, propertyKey, { value, writable: true, configurable: true });
    },
  });
}

在您的课程中稍后您只需要按照要求标记您的属性:

Component({
  selector: 'my-dir',
  template: '<div></div>'
})
export class MyComponent {
  @Input() @Required a: number;
}

说明:

如果a定义了属性 - 属性的setter a将覆盖自身,并将使用传递给attribute的值.否则 - 在组件初始化之后 - 第一次要a在类或模板中使用属性时 - 将抛出错误.

注意: getters/setter在Angular的组件/服务等中运行良好,并且可以安全地使用它们.但是在Angular之外的纯类中使用这种方法时要小心.问题是typescript如何转换getter/setter - 它们被分配给prototype类的属性.在这种情况下,我们会改变原型属性,这对于所有类的实例都是相同的.意味着我们可以得到这样的东西:

const instance1 = new ClassStub();
instance1.property = 'some value';
const instance2 = new ClassStub();
console.log(instance2.property); // 'some value'

Answer 3

正式的Angular方法是在组件的选择器中包括所需的属性。因此，类似：

Component({
    selector: 'my-dir[a]', // <-- Check it
    template: '<div></div>'
})
export class MyComponent {
    @Input() a:number; // This property is required by virtue of the selector above
    @Input() b:number; // This property is still optional, but could be added to the selector to require it

    constructor(){

    }

    ngOnInit() {

    }
}

这样做的好处是，如果开发人员a在模板中引用组件时不包括属性（），则代码不会编译。这意味着编译时安全而不是运行时安全，这很好。

令人遗憾的是，开发人员将收到的错误消息是“ my-dir不是已知元素”，这不是很清楚。

我尝试了ihor提到的装饰器方法，但由于它适用于Class（因此在TS编译为原型之后）而不是实例，因此我遇到了问题。这意味着装饰器对于一个组件的所有副本仅运行一次，或者至少我找不到使它可用于多个实例的方法。

这是选择器选项的文档。请注意，它实际上允许非常灵活的CSS样式选择器选择（甜言蜜语）。

我在Github功能请求线程上找到了此建议。

Answer 4

声明必填字段的非常简单且适应性强的方法

许多答案已经展示了这种官方技术。如果您想添加多个必需的文件怎么办？然后执行以下操作：

单个必填字段

@Component({
  selector: 'my-component[field1]',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

多个字段且全部为必填字段

@Component({
  selector: 'my-component[field1][field2][field3]',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

多个字段，但至少需要一个字段

@Component({
  selector: 'my-component[field1], my-component[field2], my-component[field3]',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})

下面是在html中使用的方法

<my-component [field1]="value" [field2]="value" [field3]="value"></my-component>

Answer 5

从 Angular v16 开始，您可以轻松使用所需的输入功能。只需添加required选项@Input：

@Component(...)
export class MyComponent {
  @Input({ required: true }) title: string = '';
}

文档： https: //angular.io/api/core/Input#required

Answer 6

你可以这样做:

constructor() {}
ngOnInit() {
  if (!this.a) throw new Error();
}

Answer 7

为什么不使用@angular/forms库来验证您的@Inputs？ 以下解决方案：

• 快速失败（不仅仅是当@input组件第一次访问该值时）
• 允许重复使用您已经用于 Angular 表单的规则

用法：

    export class MyComponent {

      @Input() propOne: string;
      @Input() propTwo: string;

      ngOnInit() {
        validateProps<MyComponent>(this, {
          propOne: [Validators.required, Validators.pattern('[a-zA-Z ]*')],
          propTwo: [Validators.required, Validators.minLength(5), myCustomRule()]
        })
      }
    }

实用功能：

    import { FormArray, FormBuilder, ValidatorFn, FormControl } from '@angular/forms';

    export function validateProps<T>(cmp: T, ruleset: {[key in keyof T]?: ValidatorFn[]} ) {
      const toGroup = {};
      Object.keys(ruleset)
        .forEach(key => toGroup[key] = new FormControl(cmp[key], ruleset[key]));
      const formGroup = new FormBuilder().group(toGroup);
      formGroup.updateValueAndValidity();
      const validationResult = {};
      Object.keys(formGroup.controls)
        .filter(key => formGroup.controls[key].errors)
        .forEach(key => validationResult[key] = formGroup.controls[key].errors);
      if (Object.keys(validationResult).length) {
        throw new Error(`Input validation failed:\n ${JSON.stringify(validationResult, null, 2)}`);
      }
    }

闪电战