angular9的學習(十九)

selectRootElement

參數

• 傳字符串 就是document.querySelector(selectorOrNode)查找,或者傳dom
• true 就是全部移動

  selectRootElement(selectorOrNode: string|any, preserveContent?: boolean): any {
    let el: any = typeof selectorOrNode === 'string' ? document.querySelector(selectorOrNode) :selectorOrNode;
    if (!el) {
      throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
    }
    if (!preserveContent) {
      el.textContent = '';
    }
    return el;
  }

小案例

el.textContent = '' 可以清除所有子孩子

<div #apps>
  <div class="aaa">sdsddssdsd</div>
  <div class="aaa">sdsddssdsd</div>
</div>

  @ViewChild('apps') ages: ElementRef;
  this.ages.nativeElement.textContent=''
我們發現子孩子全部清空了

爲true就是全部移動,默認false就是移動最外層
<div #apps>
  <div class="aaa">sdsdsdsdsddssdsd</div>
  <div class="aaa">sdsddssdsd</div>
</div>
<div #aaa>222</div>

export class UserComponent implements OnInit, AfterViewInit {
  @ViewChild('apps') ages: ElementRef;
  @ViewChild('aaa') aaa: ElementRef;
     ngAfterViewInit() {
    let app = this.renderer.selectRootElement(this.ages.nativeElement, true);
    this.renderer.appendChild(this.aaa.nativeElement, app)
  }
}

這邊提到了關於影子dom相關的內容

剛好前段時間寫過關於原生組件相關的內容,那就探討下關於angular上的使用

開啓影子dom模式

.green {
  background: green;
}
.red {
  background: red;
}

<div [ngClass]="toggledClass ? 'green' : 'red'">
  <ng-content></ng-content>
  <button (click)="toggle()">Toggle me</button>
</div>

import {Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-three',
  templateUrl: './three.component.html',
  styleUrls: ['./three.component.scss'],
    // 默認是
  // encapsulation: ViewEncapsulation.Emulated
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ThreeComponent implements OnInit {
  toggledClass = false;
  toggle() {
    this.toggledClass = !this.toggledClass;
  }
  constructor() { }

  ngOnInit(): void {
  }

}

使用

<app-three>sddssdsdsdsdsdsdsds</app-three>
<app-three>sddssdsdsdsdsdsdsds</app-three>

區別

ViewEncapsulation

• Emulated 默認
• ShadowDom 具備影子dom的特性
• None 指定此值後，Angular會簡單地將未修改的CSS樣式添加到HTML文檔的頭部,也就是成爲全局的css樣式

指令

@Directive({
  selector: 'selector1, selector2' // 選擇 ' selector1 '或' selector2 '
})

<selector1></selector1>
<selector2></selector2>

相對重定向與絕對重定向

相對的

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: DefaultComponent
  },
  {
    path: 'a/b',
    component: AComponent, // reachable from `DefaultComponent`
    children: [
      {
        //後面子路由全部返回 `redirectTo: 'err-page'` 
        path: 'err-page',
        component: BComponent,
      },
      {
        path: '**',
        redirectTo: 'err-page'
      },
    ],
  },
  {
    // 可以寫 `redirectTo: '/err-page'` 到達最外層
    path: 'err-page',
    component: DComponent,
  }
]

修改成絕對的

const routes: Routes = [
  // **STARTS FROM HERE**
  {
    /* ... */
  },
  {
    /* ... */
    children: [
      /* ... */
      {
        path: '**',
        redirectTo: '/err-page' // 跳轉到最外層
      },
    ],
  },

  {
    path: 'err-page',
    /* ... */
  }
]

絕對重定向

{
  path: 'a/b',
  component: AComponent,
  children: [
    {
      path: '',
      component: BComponent,
    },
    {
      path: 'c',
      outlet: 'c-outlet',
      component: CComponent,
    },
  ],
},
{
  path: 'd-route',
  redirectTo: '/a/b/(c-outlet:c)'
}

動態路由重定向

const routes: Routes = [
  {
    path: 'a/b',
    component: AComponent,
    children: [
      {
        // Reached when `redirectTo: 'err-page'` (relative) is used
        path: 'err-page',
        component: BComponent,
      },
      {
        path: 'c/:id',
        // foo=:foo      獲取' foo '查詢參數的值 
        // 存在於針對此路由的URL中
        // 它也適用於相對路徑: `err-page/:id?errored=true&foo=:foo`
        redirectTo: '/err-page/:id?errored=true&foo=:foo'
      },
    ],
  },
  {
    // 重定向到達的 `redirectTo: '/err-page'` 
    path: 'err-page/:id',
    component: DComponent,
  }
]

<button routerLink="a/b/c/123" [queryParams]="{ foo: 'foovalue' }">...</button>
當我們點擊 重定向了 
/err-page/123?errored=true&foo=fooValue

每當您安排導航（例如router.navigateToUrl()）時，路由器都必須經歷一些重要的階段

• 應用重定向：檢查重定向，加載延遲加載的模塊，查找NoMatch錯誤
• 認識：創造ActivatedRouteSnapshot樹
• 預激活：將結果樹與當前樹進行比較；此階段還根據發現的差異收集 canActivate和canDeactivate保護
• 路由守衛
• 創建路由器狀態：ActivatedRoute創建樹的位置
• 激活路由

asyncPipe

 count$ = interval(1000).pipe(
    delay(2000),
  );

===============
<p *ngIf="count$ | async as count; else loading1">
  Count: {{ count }}
</p>

<ng-template #loading1>
  Loading...
</ng-template>

• 自動訂閱並取消訂閱組件的銷燬。

Angular中聲明式的方法

使用SVG的使用,我們可以掛接到svg上,減少嵌套,

我們發現子組件竟然可以直接svg:ellipse 進行設置,學習到了

父
<svg lineUser></svg>
子
  <svg:ellipse rx="50" ry="50" cx="70" cy="70" stroke-width="2" stroke="red" [attr.d]="d"/>

對於html編寫內置的屬性用[attr.*] 的形式

@Component({
  selector: 'svg[lineUser]',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
    // 如果只是單純的父傳子,子組件只作爲展示可以,可以在這個變更檢測中,改成按需
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {/* 可以給自身組件添加屬性*/
    preserveAspectRatio: "none"
  }
})

export class UserComponent implements OnInit, OnChanges, DoCheck {
  x = 0;
  y = 0;
  width = 200;
  height = 200;
 // 查詢或者設置屬性   
  @HostBinding('attr.viewBox')
  get viewBox(): string {
    return `${this.x} ${this.y} ${this.width} ${this.height}`
  }

  @HostListener('click')
  clickBox() {
    ++this.width;
    console.log(this.viewBox);
  }    
}