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

Question

我有一个带有以下指令<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');
  }
}

我不确定这部分，但至少它有效。现在，如果我想再次更改 child-component 指令的属性 hidden 会发生什么？调用 showMe() 不起作用，大概是因为应用样式中的某种优先级。

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

Demo: 首先点击“显示孩子”，然后点击“隐藏”，然后再次尝试点击“显示孩子”。最后点击的按钮不起作用。

谢谢

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 得到冲突的值。