我在controller中执行存储查询，然后将结果向下传递给子组件。
// Controller
@tracked comment;
@action
async fetchComment() {
const comment = await this.store.query('note', {
filter: {
listing: this.listing.id,
},
});
if (comment && comment.length > 0) {
this.comment = comment.firstObject;
}
}
// Template
<MyComponent @comment={{this.comment}} />我想使用arg来填充子组件中的tracked属性。
// Component
@tracked comment = this.args.comment;我发现这不起作用，但作为getter效果很好。但是，使用getter时，我无法在删除该记录时将其设置为null。
我也试过在Constructor中设置tracked属性，但也不起作用。
我怀疑这与在args中传入promise或store object有关，因为这对静态数据很有效。
1条答案
按热度按时间gwo2fgha1#
代码无法工作的原因
此代码无法工作：
这是因为控制器上的
comment最初是undefined，但是当网络请求完成并且fetchComment函数中的await返回时，它将被设置为comment.firstObject。通常，args上的所有东西基本上都像它的@tracked一样运行（更准确地说，你应该把它描述为getter）。所以这通常会很好地更新。但是当你创建组件时，@tracked comment = this.args.comment;的赋值只发生 * 一次 *，所以你不再依赖于args的更新。为什么不能将
this.args.comment设置为空如果您使用getter或直接使用
this.args.comment，则无法更改此引用。这是因为this.args始终是只读的。您可以 * 更改 *this.args.something上的对象，但永远无法更改this.args上的引用或基元值。旁注：只有当组件是用
<AngleBracket />语法调用的时候，这才成立。对于旧的{{curly-component}}语法，这就不成立了。所以这并不取决于组件本身，而是取决于组件是如何被调用的。你可以通知控制器删除引用
一个 * 好 * 的做法是将
deleteComment操作传递给组件，该组件基本上在控制器上执行类似于this.comment = null的操作。然后您直接或通过getter使用this.args.comment，您可以调用this.args.deleteComment()将控制器上的comment设置为null，它将更新任何使用this.args.comment或返回this.args.comment的getter的内容。这基本上是因为在你的体系结构中控制器 * 拥有 * 数据（因为它加载它）。2所以控制器也负责删除它。
如果使用
ember-data，则可以选中isDeleted如果它是
ember-data模型（如果你调用this.store，它很可能是），那么它有一个isDeleted属性。你可以用它来检查记录是否被删除，因为ember-data记录在被删除时不会消失。这正是因为这样的问题。如何使用另一个属性 * 隐藏 * 参数
您可以执行类似以下操作来 * 隐藏 * 组件中参数：
首先
this.comment会像普通的getter一样工作，但是你可以通过设置this.commentIsDeleted = true;来 shadow delete 它，这样this.comment就会变成null。