检查组件是否在angular2中具有属性选择器

Question

我想检查Angular2中组件是否具有属性。 这是我的组件：

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

@Component({
    selector: 'field-group, field-group[half]',
    template: `
    <div class="field-group">
      <label *ngIf="label != ''">{{label}}</label>
      <ng-content></ng-content>
      <span class="validation" *ngIf="errorObject != ''"></span>
    </div>
    `
})
export class FieldGroupComponent implements OnInit {
    @Input() label: string = '';
    @Input() errorObject: any;

    constructor() { }

    ngOnInit() { }

}

对于选择器，我添加了[half] 。 现在我如何检查该组件在使用时在代码中是否具有该选择器？ 我在哪里可以检查是否存在？ 如何？

谢谢。

Answer 1

将其转换为输入：

selector: '[field-group]'

接着

@Input('field-group') fieldGroup: string;

实例化为：

<div [field-group]='half'>...</div>

要么 ...

然后在您的代码中（例如ngInit ）：

if(fieldGroup === 'half'){...

Answer 2

推荐的解决方案是使用@Input读取属性的值，但不能保证属性的存在与空属性。 请参阅演示： https : //plnkr.co/edit/wYuiRS8gYcyiYZt79yko?p=preview

不建议使用但适合的解决方案是使用ElementRef来获取组件元素的ElementRef以检查属性的存在。

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

@Component({
    selector: 'field-group, field-group[half]',
    template: `
    <div class="field-group">
      <label *ngIf="label != ''">{{label}}</label>
      <ng-content></ng-content>
      <span class="validation" *ngIf="errorObject != ''"></span>
    </div>
    `
})
export class FieldGroupComponent implements OnInit {
    label: string = '';
    errorObject: any;

    constructor(private elementRef: ElementRef) { }

    ngOnInit() {
      console.log(this.elementRef.nativeElement.getAttribute('half'));
    }

}