ng-template 在ng中主要通过viewChild TemplateRef ViewContainerRef来实现结构性操作。

模板元素与html5的template元素一样，需要被特殊处理后才能渲染。

你可以使用TemplateRef取得的内容，并通过ViewContainerRef来访问这个视图容器

import {Component, TemplateRef, ViewChild, AfterViewInit} from '@angular/core';@Component({  selector: 'my-app',  template: `

Welcome to Angular World

I am span in template `, }) export class AppComponent { name: string = 'Semlinker'; @ViewChild('tpl') tpl: TemplateRef; ngAfterViewInit() { let embeddedView = this.tpl.createEmbeddedView(null); console.dir(embeddedView); } }

https://segmentfault.com/a/1190000008672478

我们已经知道模板元素，渲染后被替换成 comment 元素，那么应该如何显示我们模板中定义的内容呢？我们注意到了 TemplateRef 抽象类中定义的 createEmbeddedView 抽象方法，该方法的返回值是 EmbeddedViewRef 对象。那好我们马上来试一下：

生命周期

Angular 内置的两种变更检测策略： Default：无论哪个组件发生了变化，从根组件开始全局遍历，调用每个组件上的 ngDoCheck() 钩子。 OnPush：只有当组件的 @Input 属性发生变化的时候才调用本组件的 ngDoCheck() 钩子。 changeDetection:ChangeDetectionStrategy.OnPush

在ngAfterContentInit钩子里面访问被投影进来的组件 @ViewChild 与 @ViewChildren
我们可以利用 @ViewChild 这个装饰器来操控直属的子组件。在ngAfterViewInit这个钩子里面可以直接访问子组件

contentChild跟ViewChild

ng-content内容投影

@ContentChildren(ChildTwoComponent) childrenTwo:QueryList;//遍历列表ngAfterContentInit():void{    this.childrenTwo.forEach((item)=>{        console.log(item);    });}

组件标签不能嵌套使用。不能优雅地包装原生的 HTML 标签。依次解释如下：

比如你自己编写了两个组件 my-comp-1 和 my-comp-2，如果没有内容投影，这两个组件就没办法嵌套使用，比如你想这样用就不行：

因为没有“内容投影”机制，my-comp-1 无法感知到 my-comp-2 的存在，也无法和它进行交互。这明显有违 HTML 设计的初衷，因为 HTML 的本质是一种 XML 格式，标签能嵌套是最基本的特性，原生的 HTML 本身就有很多嵌套的情况：

神族

人族

虫族

在真实的业务开发里面，另一个典型的嵌套组件就是 Tab 页，以下代码是很常见的：

如果没有内容投影机制，想要这样嵌套地使用自定义标签也是不可能的。

预览本地图片

iframe 的 src 属性是资源 URL 安全上下文，因为不可信源可以在用户不知情的情况下执行某些不安全的操作。 DomSanitizer 安全URL脚本访问 Cross-site scripting (跨站脚本) 跨站脚本（Cross-site scripting，通常简称为XSS） XSS 是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

其中，change方法会在每次选择图片后调用，image的src必须通过属性绑定的形式，使用插值表达式同样会出错

import { Component, OnInit } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser' @Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {     imgUrl;   constructor(    private sanitizer: DomSanitizer  ){}   ngOnInit() { }   fileChange(event){    let file = event.target.files[0];    let imgUrl = window.URL.createObjectURL(file);    let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);     this.imgUrl = sanitizerUrl;  }}

ngModel原理

https://www.pocketdigi.com/20170206/1560.html NgModel适用表单的双向绑定，其原理是封装了value property的单向绑定和input事件。 ngModel还有展开形式，用于手工处理用户输入的数据:

enver

热加载

http://www.ngfans.net/topic/218/post