更改视图属性EventAggregator Aurelia

Question

import {inject, bindable, customElement} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@customElement('add-company-modal')
@inject(EventAggregator)
export class AddCompanyModal {
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
    }

    attached() {
        console.log('attached add company modal');

        this.eventAggregator.subscribe('add-company-modal-toggle', open => {
            console.log('getting hit');
            if (open) this.open();
            else this.close();
        });
    }

    open() {
        this.activate = true;
    }

    close() {
        this.activate = false;
    }
}

我做得对吗？基本上，我有另一个视图模型，就是发布事件。控制台日志正在读取。这个想法是activate绑定到一个class

<div class="modal-backdrop ${activate ? 'modal-show' : ''}" click.trigger="close()">
    <div class="modal">
        <div class="modal-title">
            <h1>Add Company <span class="modal-close">x</span></h1>    
        </div>
        <div class="modal-body modal-no-footer">
            <add-company>

            </add-company>             
        </div>
    </div>
</div>

这个包在一个template中。然而，这一点都没有显示出来。如果我有一个bindable属性，但只在您单击其他vm上的打开时，它才能工作。当您关闭该模型时，您不能再次重新打开它，因此我使用的是事件聚合器。

所以console.log被击中了，我知道我已经正确地设置了事件聚合，我只是有一种感觉，这个框架没有收集到这个信息。我知道如果它是角的，那么它可能在消化周期之外，但我知道奥雷利亚不是那样工作的。

再生产

我创建了一个小型回购程序来在我的Github上复制这些问题

Answer 1

问题在于订阅回调的值始终是false。

在我的代码中这是一个错误。

Answer 2

activate听起来可能更像activated或isActivated。

只是FYI有一个生命周期方法，路由器将调用它，名为activate，所以只想让您知道可能发生的冲突。

如果这没有帮助，我的下一步将是在订阅事件中记录open的值。我还将验证它是否在method undefined error或任何东西上失败。

最后，我个人喜欢在类或构造函数中定义属性。您可能正在绑定到undefined，这样它就不会捕捉到值的变化。

export class AddCompanyModal {
    isActivated = false;
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
    }

    attached() {
        console.log('attached add company modal');
        this.eventAggregator.subscribe('add-company-modal-toggle', open => {
            console.log('getting hit');
            if (open) this.open();
            else this.close();
        });
    }

    open() {
        this.isActivated = true;
    }

    close() {
        this.isActivated = false;
    }
}