Question

我想要做的就是绕过Angular 2语法。我发现的例子似乎使用了不同的方法。

查看 foo ：

这是我如何设置我想要使用的每个变量吗？

我使用：syntax定义它，并指定它的类型？然后我用它来引用它。？

export class SwitchClientComponent implements OnInit {
    filterString: string = '';
    foo: string ='';


    ngOnInit() {

        this.foo = localStorage.getItem('bar') || '!';
    }

。

    <span>[{{foo}}]</span>

Answer 1

请参阅Angular 2文档，其中有关Template Variables

的部分

<强>插值

使用{{}}在模板中显示变量的方式称为插值。

<h3>
  The title is: {{title}}
  <img src="{{heroImageUrl}}" style="height:30px">
</h3>

如您所见，即使在属性中也可以使用插值变量，甚至可以混合到静态文本

属性绑定

某些属性可以用方括号括起来，告诉Angular绑定传递给该变量的值。在这种情况下，您不需要使用{{}}语法。

<img [src]="heroImageUrl">

模板表达

您还可以执行表达式并使用函数的返回值

<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

当然getVal()将是一个需要在组件中定义为公共的函数。

本地模板变量

另请注意，您可以动态定义模板变量，例如使用ngFor指令

<div *ngFor="let hero of heroes">{{hero.name}}</div>

在此示例中，hero未在Component中定义（并且通过调用this.hero在组件类中不可见）但它将在ngFor的上下文中是本地的块。含义：包含div的{{1}}的所有子元素。

数组ngFor需要存在并在Component中公开。正如您在本案中所看到的，您不需要使用heores语法。这是因为Angular已经在期待变量，并自动插入你将放在那里的任何东西。

{{}}

此语法改为提供对<input #heroInput> {{heroInput.value}} DOM元素的引用。然后，input将在模板中可见，但无法直接从组件内部访问（有一种方法可以从组件中使用它）。

还有一些规则，但阅读该文章应该可以为您提供所需的所有信息。

定义组件公共变量

使用上述所有示例的组件如下所示：

heroInput

Answer 2

只有 {{foo}} 没有方括号 []

<span>{{foo}}</span>

Angular 2 101：定义和使用变量

2 个答案: