[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
You can place content inside of the instance of your component element then manage it inside of the component’s template using ng-content
. This process is called reprojection, but you may be more familiar with the term “transclusion”.
Home:
<div>I am home component</div> <widget-two>
<widget-one [message]="simpleService.message"></widget-one>
</widget-two>
<widget-two>
This is also widget two
</widget-two>
widget-two:
import { Component, OnInit } from '@angular/core'; @Component({
moduleId: module.id,
selector: 'widget-two',
templateUrl: 'widget-two.component.html'
})
export class WidgetTwoComponent implements OnInit {
constructor() { } ngOnInit() { } }
<h2>Above</h2>
<ng-content></ng-content>
<h2>Below</h2>
[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)的更多相关文章
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- [Angular 2] Generate and Render Angular 2 Template Elements in a Component
Angular 2 Components have templates, but you can also create templates inside of your templates usin ...
- [Angular] Style HTML elements in Angular using ngStyle
We will learn how to make use of the ngStyle directive to directly add multiple style attributes to ...
- angular学习的一些小笔记(中)之基础ng指令
一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...
- Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular
Communicating with a remote server via HTTP presents an extra level of complexity as there is an inc ...
- Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
随机推荐
- C#缓存的一点想法及测试
项目开发中,用到了缓存,其中的一个列表项,可能要多线程处理,就有了下面的想法,具体的问题在代码中有详细说明,见下文. static void Main(string[] args) { 测试缓存的想法 ...
- c 按范围快速指定整数
以前用过octave, 和matlab类似的软件, 指定范围非常方便 i = 1:10:100; 就可以得到 10 20 30 ... 100 这一系列的数据, 但是在c里面, 必须手动写循环, 太 ...
- WebSocket with Flask
转自:https://blog.shonenada.com/post/websocket-with-flask/ WebSocket with Flask HTML5 以前,HTML 还不支持 Web ...
- 转】windows下使用批处理脚本实现多个版本的JDK切换
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/5209386.html 感谢! 一.JDK版本切换批处理脚本 我们平时在window上做开发的时候,可能需要同时开 ...
- java.io.IOException: Messenger was closed
程序运行一段时间后抛出异常java.io.IOException: Messenger was closed,不知道是啥原因? ———————————————————————————————————— ...
- -ms-viewport的问题
Windows 8 中的 Internet Explorer 10 和 Windows Phone 8 Internet Explorer 10 doesn't differentiate devic ...
- Working with Other Node Types
[Working with Other Node Types] [Shape Nodes Draw Path-Based Shapes] The SKShapeNode class draws a s ...
- apiCode/1/1.1/1.1.1
public abstract class myClass { private string id = ""; private string name = "" ...
- php连接mysql配置
php连接mysql测试代码: <?php $link=mysql_connect('localhost','root','123456'); if(!$link) echo "失败! ...
- CF 86D Powerful array 【分块算法,n*sqrt(n)】
给定一个数列:A1, A2,……,An,定义Ks为区间(l,r)中s出现的次数. t个查询,每个查询l,r,对区间内所有a[i],求sigma(K^2*a[i]) 离线+分块 将n个数分成sqrt(n ...