Question

在Angular中[]中使用变量/表达式的范围是什么？在以下Plunkr代码中，helloWorld中定义了rio-app，但在rio-hello中使用了helloName: string = "test";。 Angular会一直搜索到root父级来查找变量吗？如果子组件和父组件具有相同的变量会发生什么？我在hello.component.ts中添加了Hello test，但输出不是<div> <rio-hello name="World"></rio-hello> <rio-hello [name]="helloName"></rio-hello> </div>

http://plnkr.co/edit/LEtEN9?p=preview

hello.component.ts

更改了import { Component, Input } from '@angular/core'; @Component({ selector: 'rio-hello', template: '<p>Hello, {{name}}!</p>', }) export class HelloComponent { @Input() name: string; helloName: string = "test"; }但仍然获得了相同的输出。

Answer 1

我猜rio-app包含两个rio-hello？

如果是这样，以下是它的工作原理：

在app组件中，您有一个名为helloName的变量。

在相应的HTML中，您会看到2 hello个组件：

<rio-hello name="World"></rio-hello>
<rio-hello [name]="helloName"></rio-hello>

然后，在hello组件中，您有：

@Input() name: string;

这一行说

在我的组件的HTML选择器上，有一个名为name的属性。请把它的价值归还给我。

您的hello组件将获取属性的值，并将其设置为变量。但它如何决定采取什么？因为我们看到两个组件都具有name属性，但不是相同的。

这与 Angular模板语法有关：简单就是这样：

name="x"：您向子组件发送字符串等于“x”
[name]="x"：您向组件发送名为x的变量<

(name)="x($event)"：您的子组件向其父组件发送一个值，该组正在调用函数x

[(name)]="x"：父级向子级发送x变量，可以更新父级中的x值（需要更多代码）

我认为这应该解释它是如何运作的。但如果没有，请随意问！

Answer 2

[name]需要一个变量

name是一个需要字符串的属性，你不能在这里使用变量

例如，尝试使用 <rio-hello name="helloName"></rio-hello>

虽然helloName是变量，但Angular将其视为字符串。

Answer 3

实际上name变量是rio-hello组件的本地变量，因此每当您在应用中包含该组件时，它都会保存每个name变量。

所以在代码中：

<div>
  <rio-hello name="World"></rio-hello> 
  <rio-hello [name]="helloName"></rio-hello>
</div>

有两个rio-hello个组件，每个组件都有自己的name变量，分别与name="World"和[name]="helloName"绑定。

回答你的第二个问题：

更改了hello.component.ts但仍然获得了相同的输出。

实际上，当您通过以下方式绑定HTML中的name值时：

<rio-hello [name]="helloName"></rio-hello>

它将覆盖{：1}中nae的初始化值

@Input() name: string;

这个Plunkr代码如何工作？

3 个答案: