技術分享主幹

可可西里發表於2018-05-14

  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

技術分享主幹
技術分享主幹

相關文章