Angular 中模板引用变量的范围是什么？

Question

Angular 中模板引用变量的范围是什么？

\n\n

我在文档中找不到我的问题的明确答案。尽管根据经验我可以说整个模板可以访问模板引用变量。

\n\n

1是这样吗？模板引用变量是否保证在整个模板中可访问？

\n\n

2或者模板引用变量是否只能在模板引用变量引用的元素的子元素和同级元素中访问？

\n\n

在这里我发现了以下声明：

\n\n

\n

使用模板变量引用元素 \xe2\x80\x94newHero模板变量引用<input>元素。您可以newHero从该<input>元素的任何同级元素或子元素进行引用。

\n

\n\n

这是否意味着Angular 只保证了2 ？

\n

Answer 1

只要 DOM 中存在相应的元素，就可以从模板中的任何位置访问模板引用变量。

例如。<ng-template>如果元素尚未渲染，则无法访问元素内的模板引用变量。

<ng-template #templateOne let-message let-showAdditional="show">
  <div #templateDiv>
    One <br />
  </div>
</ng-template>

<ng-container *ngIf="templateDiv">
  Got template div
</ng-container>

这里 Angular 会抛出错误

类型“SomeComponent”上不存在属性“templateDiv”。

因为该变量引用的元素不存在于 DOM 中。

关于你的第2点。

您可以newHero从该元素的任何同级元素或子元素进行引用。

他们指的是具体的教程。注意它没有说

您newHero 只能从该元素的任何同级元素或子元素进行引用。