动态更新Angular2指令中自定义属性的值

我不明白为什么你需要一个自定义指令来隐藏元素，而你有[hidden]属性和*ngIf（你也可以传递函数）。但无论如何，要从属性指令中获取信息，您必须使用@Input（）和选择器的名称，如下所示：

export class ShowHeaderDirective implements OnInit{
@Input('showHeader') somealias:boolean;
construct(private el: ElementRef){}
 ngOnInit() {
    if(this.somealias === true){
       //do something with your element
    }
 }

您必须使用OnInit，因为输入值在构造函数中不可用

要将值传递给组件或指令，请使用@Input()

export class ShowHeaderDirective{
  @Input() isHidden:boolean = false;  
  private _el:HTMLElement;
  constructor(private el: ElementRef, private renderer: Renderer){
    debugger;
    /* alert(this.el.nativeElement.attributes.showheader.value);
    if(this.el.nativeElement.attributes.showheader.value=="false"){
        this.el.nativeElement.style.display="none";
    } */
  }
}

并像一样使用它

<li showHeader isHidden="!showHeader"

您也可以使用输入的选择器名称

@Input() showHeader:boolean = false;  

并像一样使用它

<li [showHeader]="!showHeader"

但您也可以使用hidden属性，即所有元素都具有

<li [hidden]="!showHeader"

我尝试了一些东西，也许这将有助于展示我们可以更新Angular中自定义属性的值。

在这里我创建了2个组件app-list-display和app-list-item-detail的想法是使用前者以列表方式显示数据，当用户单击列表中的任何项目时，会发出一个自定义事件，该事件会触发对主app组件的操作。

app组件然后更改一个变量的值，然后将该变量作为自定义属性提供给另一个app-list-item-detail组件。

这是的代码应用程序列表显示.html

<ul class="list-group" style="float:left margin-left=0px;">
  <li (click)="showItem(item)" *ngFor="let item of items" class="list-group-item list-group-item-action text-justify">{{item.name}}</li>
</ul>

应用程序列表显示。ts

import { Component, OnInit , Input , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-list-display',
  templateUrl: './list-display.component.html',
  styleUrls: ['./list-display.component.css']
})
export class ListDisplayComponent implements OnInit {
  @Input('itemsToBeDisplayed')items:any; 
  @Output('transferItem') transfer = new EventEmitter<{name:string}>();
  constructor() { }
  ngOnInit() {
  }
  showItem(item){
    console.log("in showItem "+JSON.stringify(item,null,2))
    this.transfer.emit(item)
  }
}

app list item detail.html这只是一个示例文本，用于显示用户单击列表中不同项目时数据的变化。

<h4>We are in list detail component
{{showSomething.something}}</h4>

应用程序列表项详细信息.ts这是组件的支持ts文件，表示它具有@Input装饰器显示的自定义属性。

import { Component, OnInit , Input} from '@angular/core';
@Component({
  selector: 'app-list-item-detail',
  templateUrl: './list-item-detail.component.html',
  styleUrls: ['./list-item-detail.component.css']
})
export class ListItemDetailComponent implements OnInit {
  @Input()showSomething:any;
  constructor() { }
  ngOnInit() {
  }
}

现在在app.component.html中，它使用了以上两个组件，如下所示

<app-list-display [itemsToBeDisplayed]="someArrayData" (transferItem)="showSentItem($event)">

<app-list-item-detail [showSomething]="someTxData">
</app-list-item-detail>

如果您注意到app-list-display组件中为自定义事件提供了函数showSentItem。对于另一个组件app-list-item-detail，一个名为someTxData的对象作为自定义属性被注入。这里注入的对象可以通过一个简单的函数调用来更改，这也可以意味着一个简单自定义事件，在我们的情况下，它将是showSentItem

所以现在在app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 someArrayData = [{name:"John"},{name:"Jane"}];
  someTxData:any;
  showSentItem(item){
    item.something = item.name
    this.someTxData = item;
  } 
}

如果您看到最后一行，this.someTxData将从第一个组件的列表行中获得对象（由于自定义事件），并且该对象将被馈送到第二个组件自定义属性。

因此，理想情况下，一个组件上的自定义事件通过实现者与另一个组件的自定义属性进行对话。

抱歉回答太长。