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)的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 ...

  4. angular学习的一些小笔记(中)之基础ng指令

    一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...

  5. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  6. [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 ...

  7. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  8. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  9. 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 ...

随机推荐

  1. C#缓存的一点想法及测试

    项目开发中,用到了缓存,其中的一个列表项,可能要多线程处理,就有了下面的想法,具体的问题在代码中有详细说明,见下文. static void Main(string[] args) { 测试缓存的想法 ...

  2. c 按范围快速指定整数

    以前用过octave, 和matlab类似的软件, 指定范围非常方便 i = 1:10:100;  就可以得到 10 20 30 ... 100 这一系列的数据, 但是在c里面, 必须手动写循环, 太 ...

  3. WebSocket with Flask

    转自:https://blog.shonenada.com/post/websocket-with-flask/ WebSocket with Flask HTML5 以前,HTML 还不支持 Web ...

  4. 转】windows下使用批处理脚本实现多个版本的JDK切换

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/5209386.html 感谢! 一.JDK版本切换批处理脚本 我们平时在window上做开发的时候,可能需要同时开 ...

  5. java.io.IOException: Messenger was closed

    程序运行一段时间后抛出异常java.io.IOException: Messenger was closed,不知道是啥原因? ———————————————————————————————————— ...

  6. -ms-viewport的问题

    Windows 8 中的 Internet Explorer 10 和 Windows Phone 8 Internet Explorer 10 doesn't differentiate devic ...

  7. Working with Other Node Types

    [Working with Other Node Types] [Shape Nodes Draw Path-Based Shapes] The SKShapeNode class draws a s ...

  8. apiCode/1/1.1/1.1.1

    public abstract class myClass { private string id = ""; private string name = "" ...

  9. php连接mysql配置

    php连接mysql测试代码: <?php $link=mysql_connect('localhost','root','123456'); if(!$link) echo "失败! ...

  10. 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 ...