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…

@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…

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…

*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…

最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时候,组件的一部分模板就需要由调用方提供. 在 React 里面,这种需求挺简单的,只要实现一个 date => Element 这样的函数就好了,但是 Angular 模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能. 第一种方式 <ng-content> <ng-conten…

现在,我们写一个组件puppiesListCmp,用于显示小狗狗的列表: //puppies-list.component.ts @Component({ selector: 'puppies-list', template: ` <div *ngFor="let puppy of puppies"> <span>{{puppy.name}}</span> <span>{{puppy.age}}</span> <span…

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

在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.component.ts: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'demo-component', templateUrl: './demo.component.html', styleUrls…