- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有许多演示组件通信的代码示例,
我对这两种技术之间的区别感到困惑
ViewChild 定义:
ViewChild decorator get access to a child component, directive or a DOM element from a parent component class, ViewChild returns the first element that matches a given component, directive or template reference selector.
根据这个引用,
ViewChild 赋予 DOM 元素对父组件的完全访问权限,指令无需在任何更新时将 EventEmitter 发送到父组件。
我的问题
核心下的act、data Binding、Lifecycle如何?
真正的实际用途是什么,解决什么问题?
最佳答案
是的,其中一些术语令人困惑。
在大多数情况下,父子关系(父组件和子组件)是指在另一个组件的 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
另一方面,装饰器允许您访问组件关联模板上的任何 元素。然后就可以直接访问了。这与父/子组件没有直接关系。
例如,您可以访问任何随机的 <div>
页面上的元素并设置其背景颜色。或者您可以访问 <input>
元素并设置其焦点。
希望这有助于澄清差异。
关于angular - ViewChild 与 ChildComponent - Angular 6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51535670/
我目前正在学习 angular ViewChild,但在使用 ViewChild 从 DOM 选择自定义引用变量时,我似乎遗漏了一些东西。 在我的模板中有两个表: 我正在尝试针对每个对象进行排序:
在我的组件中,我有以下内容: @ViewChild('PaginatedTableComponent') userTable: PaginatedTableComponent; 在这个组件中,我有以下
我正在使用父子组件。在子组件中,我使用搜索框。我需要随时按需获取搜索框值。如何获得? 子组件 html - GridViewComponent 父组件 ts @ViewChild(GridviewC
我有两个组件,一个 videoComponent 和 videoControlsComponent。视频组件包含 元素和视频组件有一些按钮来操作 videoComponent 元素。 You
我想在我的 HTML 中打印一个 10x10 的网格。为此,我在我的 html 中使用了两个 ngFor。在我的 TypeScript 组件中,我想使用 @ViewChild 访问此表的单元格以将光标
在我的 Angular 应用程序中,我的 @ViewChild 实例无法填充 HTL matSort。 我的组件.ts: import { MatSort } from '@angular/mater
基本上不是这样做: class Controller implements AfterViewInit{ @ViewChild(IconComponent) iconComponent: Ic
我已经检查了这个问题的其他答案,但到目前为止似乎没有任何帮助。我正在尝试在 ionic 2 应用程序中显示 map 。但是当我尝试选择 #map 时div 它返回未定义。这是代码 page1.html
出于某种原因,我的 Angular 5 应用程序中的 @ViewChild 无法正常工作。我在我的组件中这样定义它: case-detail.component.html: 我在我的 C
我有这样一个组件: export class ParentComponent implements OnInit, OnDestroy { @ViewChild(ChildComponent)
我有一个名为 EasyBoxComponent 的组件,和一个带有此 @Viewchild 的 @Directive: @ViewChild(EasyBoxComponent) myComponent
需要帮助来理解以下语句中 {read: ViewContainerRef} 的含义。 @ViewChild('myname', {read: ViewContainerRef}) target; 最佳
在以前的angular版本中,我们可以像这样定义一个带有元素ref的viewchild @ViewChild('fileInput') fileInput: ElementRef; 现在我们必须在构造
Angular v8 刚刚发布。虽然它主要是向后兼容的,但还是有一些突破性的变化。 根据 Angular 的 Changelog一个核心变化是(我引用): “在 Angular 版本 8 中,要求所有
我在使用 @ViewChild 和通过 ngIf 显示的组件时遇到问题。我找到了各种解决方案,但没有一个对我有用。 这是我的主要组件,由多个步骤(为了简洁起见,我只在代码中显示 2 个)和一个用于向前
我正在尝试获取 audio组件内的元素。起初我是用老式的方式做的: $player: HTMLAudioElement; ... ngOnInit() { this.$player = docum
这个问题已经有答案了: What are all the valid selectors for ViewChild and ContentChild? (2 个回答) 已关闭 4 年前。 在本文中C
如果我的 fileInput 元素在一个普通的 div 中,那么它工作正常。但是如果我把它放在 里面然后我得到它未定义。 这是我的代码: HTML Modal title
我目前正在开发一个项目,我需要根据组件传递一些@input值。因此,该指令将相应地发挥作用。但问题是我无法获得该指令的引用。相反,我只得到了 elementRef 作为返回。请参阅下面的 stackb
我是 angular2 的新手,并不专业。我有一个父子组件,当用户单击按钮时,我希望子组件的选择器显示一些内容。所以它应该是条件,并且它也是从子组件中使用的。这是我的代码:父级 HTML:
我是一名优秀的程序员,十分优秀!