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);
  }    
}