指令现在已完成。让我们看看可以在哪里以及如何使用它。

在我们的示例元素模板中，我们一直将 timeAgo 指令作为字符串渲染到子表达式中：

      <p>This page was rendered ${timeAgo(timeCreated)}.</p>

然而，我们的指令可以在_任何_表达式类型中使用，包括属性表达式和属性值表达式。假设我们有一个 <comment-card> 元素，它接受 subject、description 和 time 等字段。我们已经为你导入了一个，所以在模板中也添加这个：

  <comment-card user="litdeveloper"
                time="12:49 pm"
                subject="Just tried AsyncDirectives!"
                content="Cool stuff, they're really powerful!">
  </comment-card>

现在，由于该元素接受时间作为字符串，我们可以将 timeAgo 指令绑定到该属性上，它将定期设置元素的 time，而无需外部模板重新渲染：

  time=${timeAgo(timeCreated)}

恭喜！你现在有了一个可用的、实用的 AsyncDirective！

进一步学习的想法：

• 为指令添加一个可选的 frequency 参数，以自定义指令重新渲染值的频率。额外加分项：确保用户可以在定时器启动后更改频率！
• 为指令创建一个 auto 模式，根据已过去的时间量自动调整定时器更新的 frequency。
• 尝试将 timeAgo 指令制作成一个组件版本。或者一个 ReactiveController 版本？什么时候使用一种比另一种更好？（提示：Lit 组件可以轻松在 Lit 上下文之外使用，但不能像本示例中那样绑定到属性/属性值；控制器适用于在组件内部共享功能，而异步指令非常适合在模板级别、组件外部共享功能。）