Question

我有一个viewDetails组件。它的输入是一个名字。如果name！= null，我会显示详细模式。在关闭时我设置name = null。非常直接......除了我在模态外单击时无法将其关闭。

我有指令设置，效果很好;但是，我怎么能告诉它何时应该积极地＆＃34;听与否。

现在我只是使用name作为真实姓名或使用null来管理显示/隐藏功能。

父组件：

<button (click)="detailName = item.name">Details</button>
<my-detail [(name)]="detailName"></my-detail>

详情视图：

<div [hidden]="!name">    // full screen with gray background
  <div (clickOutside)="close()">   // inner modal contents

细节控制器

  @Input() name: string;
  @Output() nameChange: EventEmitter<string>;

  close() {
    this.name = null;
    this.nameChange.emit(null);
  }

（clickOutside）指令按预期工作，如果单击模态外部，则调用close函数。但是，问题是在按钮单击时会生成元素，但clickOutside事件会触发，因为它在模态之外。我也不能使用某种基于名称的clickOutsideIsActive布尔值！= null，因为那时名字刚刚被设置。

我理解为什么它不起作用，但想知道如何改变以获得理想的行为。我知道我可以在onCreate的东西上包装发射器中的所有东西，但我真的很喜欢这个设置的干净和简单。感谢您的反馈。

更新好吧看起来我得到了它，或者至少有一条解决方案的路径。使用生命周期钩子OnChanges，观察它的变化，并在超时或其他东西中抛出isActive。 ......好的，解决了，回答如下。

Answer 1

通过使用angular2生命周期钩子onChanges，您可以保留一个isActive标志并将其传递给closeOnClick指令。实施例...

<div [hidden]="!name">
  <div (clickOutside)="close()" [clickOutsideActive]="isActive">

  ngOnChanges(changes: SimpleChanges) {

    let change = changes['name'];
    if(!change) return;  // if no property name, don't do anything

    // if setting name to null (close), deactivate click watching
    else if(typeof change.previousValue === 'string' && !change.currentValue) {
      this.isActive = false;
    }
    // if setting name to string from null (open), activate click watching
    else if(typeof change.currentValue === 'string' && !change.previousValue) {
      // timeout used to let modal open before it tries to close itself
      setTimeout(() => {
        this.isActive = true;
      });
    }
  }

单击外部关闭模式，但[隐藏]与@Input绑定，不知道何时准备好

1 个答案: