@ContentChild normally works with ngAfterContentInit lifecycle. @ContentChild is used for looking into child component's props. For example, we a app component: <auth-form (submitted)="loginUser($event)"> <h3>Login</h3> <aut…

contentchild // 使用方法 git clone https://git.oschina.net/mumu-osc/learn-component.git cd learn-component git pull origin contentchild npm install ng serve <!-- test-content-child.component.html --> <div class="panel panel-primary"> <…

For example you have a component, which take a trasclude input element: <au-fa-input id="password-field" icon="lock" > <input placeholder="Password" class="test-class"> </au-fa-input> There is many…

原文 https://www.jianshu.com/p/5ab619e576ea 大纲 1.认识ViewChild 2.认识ContentChild 3.ViewChild与ContentChild的联系和区别 认识ViewChild /* angular中文文档的说明 You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the v…

Allow the user to control the view of the toggle component. Break the toggle component up into multiple composable components that can be rearranged by the app developer. Compound component mainly for rendering flexibility. It hides the implements de…

Content is what is passed as children. View is the template of the current component. The view is initialized before the content and ngAfterViewInit() is therefore called before ngAfterContentInit(). @Component({ selector: 'parent-cmp', template: '<d…

*The children element which are located inside of its template of a component are called *view children *. On the other hand, **elements which are used between the opening and closing tags of the host element of a given component are called *content…

官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个令牌. 所支持的选择器包括: 任何带有 @Component 或 @Directive 装饰器的类 字符串形式的模板引用变量(比如可以使用 @ViewChild('cmp') 来查询 <my-component #cmp> 组件树中任何当前组件的子组件所定义的提供商(比如 @ViewChild(S…

Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. 每个组件包含自己的html.css.js代码. Web Component标准包括以下四个重要的概念: Custom Elements(自定义标签):可以创建自定义 HTML 标记和元素: HTML Templates(HTML模版):使用 概括来说就是,可以创建自定义标签来引入组件是前端组件化的…

@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild('mydiv') mydiv: ElementRef // 返回原生节点 let el = this.mydiv.nativeElement // // 使用原生方法 let ipt = el.querySelector('input') 作用二:选择子组件可调用自组件内的函数 子组件:@Component…