Question

我有一个父组件，其中包含以下指令var counts = [ 0, 0, 0 ] // create an array of integers, where the Ints in the array represent the count of cards in each compartment cards.forEach { counts[ $0.compartment ] += 1 } // for each card, increment the count in array corresponding to the compartment of the card. (if card.compartment == 1, increment counts[1], and so on print("cards in compartment 1 \(counts[1])") print("cards in compartment 2 \(counts[2])")。最初，与此指令关联的子组件是隐藏的，在某些事件之后，我想让它可见，因此我在父组件中使用按钮<child-component [hidden]="!visible"></child-component>来更改此属性。

<button (click)="showMe()">Show child</button>

问题是，一旦显示子组件，我需要在子组件中提供一个按钮export class App { constructor() { this.visible = false; } showMe() { this.visible = true; } }以再次隐藏它：

<button (click)="hideMe()">Hide</button>

我对这部分不确定，但至少它有效。现在，如果我想再次更改export class ChildComponent { constructor(private _element: ElementRef, private _renderer: Renderer) {} hideMe() { let el = this._element.nativeElement); this._renderer.setElementStyle(el, 'visibility', 'hidden'); } }指令的属性hidden，会发生什么？调用showMe（）并不起作用，大概是因为应用样式中有某种优先级。

这样做的正确方法是什么？

Demo：首先点击＆＃39;显示孩子＆＃39;，然后点击＆＃39;隐藏＆＃39;然后尝试点击“显示孩子”＆＃39;再次。点击的最后一个按钮不起作用。

由于

Answer 1

不确定这是您想要的方法，但我认为它的行为与描述相似：

@Component({
  selector: 'child-component',
  providers: [],
  host: {'[hidden]': 'hidden'},
  template: `
    <div>
      This is the child
    </div>
    <button (click)="hidden=true">Hide</button>
  `,
})
export class ChildComponent {
  @Input() hidden:boolean = false;
}

  <child-component #child [hidden]="true"></child-component>
  <button (click)="child.hidden=false">Show child</button>

Plunker example

您的示例中的问题是hidden属性和visibility: hidden会产生冲突的值。

从Angular 2中的子组件更改指令属性

1 个答案: