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

转载于:https://www.cnblogs.com/Answer1215/p/5892568.html

[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)相关推荐

Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装...
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器教程简单,不会的趣闻度娘 3 Visual Studio ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...
AngularJS精妙绝伦的控制器
为什么使用控制器? 控制器就像领域模型和视图的纽带,它从模型中暴露数据给视图,它给视图提供数据与服务,并且定义了所需的业务逻辑,从而将用户行为转换为模型上的变化. 一.理解基本原理控制器是通过NG ...
angular 指定components的路径_如何手动启动 Angular 程序
原文链接: How to manually bootstrap an Angular application blog.angularindepth.com Angular 官方文档写到,为了启动 ...
Angular Elements，四步将Angular 组件转换为 web 组件
Angular Elements,四步将Angular 组件转换为 web 组件从Angular版本6开始,我们可以将Angular组件公开为Web组件,或者更确切地说:作为自定义元素,它是Web组 ...
您需要了解有关Angular中的ng-template，ng-content，ng-container和* ngTemplateOutlet的所有信息...
It was one of those days when I was busy working on new features for my office project. All a sudden ...
All About Angular 2.0
2019独角兽企业重金招聘Python工程师标准>>> angular All About Angular 2.0 Posted by Rob Eisenberg on Novem ...
深入理解 Angular 变化检测（change detection）
引言本文分享一些讲解Angular Change Detection的文章,并指出其中有意思的内容,以及自己的一些总结和引申. Angular Change Detection Explained ...
Angular Component的DOM级别的单元测试方法
HTMLElement <span [textContent] = "AText"></span> export class AComponent {ATe ...

[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)

[Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)相关推荐

最新文章

热门文章