技术分享主干

181 阅读3分钟
  1. ng-template 在ng中主要通过viewChild TemplateRef ViewContainerRef来实现结构性操作。

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

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

import {Component, TemplateRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    

Welcome to Angular World

`, }) 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

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

生命周期

  1. Angular 内置的两种变更检测策略: Default:无论哪个组件发生了变化,从根组件开始全局遍历,调用每个组件上的 ngDoCheck() 钩子。 OnPush:只有当组件的 @Input 属性发生变化的时候才调用本组件的 ngDoCheck() 钩子。 changeDetection:ChangeDetectionStrategy.OnPush
  2. 在ngAfterContentInit钩子里面访问被投影进来的组件 @ViewChild 与 @ViewChildren
    我们可以利用 @ViewChild 这个装饰器来操控直属的子组件。 在ngAfterViewInit这个钩子里面可以直接访问子组件
  3. 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还有展开形式,用于手工处理用户输入的数据:

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

enver

热加载

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