代码之家 › 专栏 › 技术社区 › Roy G

ViewChild与ChildComponent-角度6

angular6 angular2-directives angular

1

Roy G · 技术社区 · 8 年前

有许多代码示例演示组件通信,

我不明白这两种技术有什么区别

子组件
视童

定义了ViewChild:

ViewChild decorator获取对子组件、指令或来自父组件类的DOM元素,ViewChild返回第一个与给定组件、指令或模板匹配的元素参考选择器。

根据这个参考,

ViewChild授予DOM元素对父组件的完全访问权,而不必在任何更新时向父组件发送EventEmitter。

我的问题

我们可以说父组件和viewchild之间的关系是只有单向绑定,父组件和子组件之间是双向绑定吗?
核心下的行为,数据绑定,生命周期?
什么是真正的实际用途,它来解决什么问题?

2 回复 | 直到 8 年前

1

4

DeborahK 8 年前

是的,有些术语令人困惑。

在大多数情况下,父子关系(父组件和子组件)指的是组件 在内部 另一个组件的HTML。

在下面的示例中,“star”组件是产品详细信息组件中的子组件。

子组件实际上是在父组件的模板中添加的:

父模板:

  <div class='col-md-8'>
    <pm-star [rating]='product.starRating'>
    </pm-star>
  </div>

子组件

@Component({
  selector: 'pm-star',
  templateUrl: './star.component.html',
  styleUrls: ['./star.component.css']
})
export class StarComponent {
  // ...
}

这个 ViewChild 另一方面,decorator允许您访问任何组件关联模板上的元素。然后您可以直接访问它。这与父/子组件没有直接关系。

例如,您可以访问任意 <div> 元素并设置其背景色。或者你可以访问 <input> 元素并设置其焦点。

希望这有助于澄清差异。

2

0

user4676340user4676340 8 年前

Component interactions 是两个组件相互通信的方式。

ViewChild decorator 是现有组件交互之一。