[成都|内门弟子]CSS-何俊|2021年03月15日的日报-技能树.IT修真院

发表于： 2021-03-15 20:54:20

1 996

今天完成的事情：

angular组件：

视图包装：

通过在组件的元数据上设置视图封装模式，分别控制每个组件的封装模式

封装模式：

ShadowDom 模式使用浏览器原生的 Shadow DOM 实现（参阅 MDN 上的 Shadow DOM）来为组件的宿主元素附加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中，组件的样式也被包含在这个 Shadow DOM 中

Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的

None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。本质上，这跟把组件的样式直接放进 HTML 是一样的

组件交互：

通过输入型绑定把数据从父组件传到子组件

在HeroChildComponent 输入带@Input 装饰器属性

export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
}

父组件 HeroParentComponent 把子组件的 HeroChildComponent 放到 *ngFor 循环器中，把master 字符串属性绑定到子组件的 master 别名上，并把每个循环的 hero 实例绑定到子组件的 hero 属性

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

在父子指令及组件之间共享数据:

Angular 中的一个常见模式就是在父组件和一个或多个子组件之间共享数据。可以用 @Input() 和 @Output() 来实现这个模式

Input装饰器:

用来把某个类字段标记为输入属性，并提供配置元数据。该输入属性会绑定到模板中的某个 DOM 属性。当变更检测时，Angular 会自动使用这个 DOM 属性的值来更新此数据属性

Output装饰器:

用于把一个类字段标记为输出属性，并提供配置元数据。凡是绑定到输出属性上的 DOM 属性，Angular 在变更检测期间都会自动进行更新

配置子组件

使用

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
  @Input() item: string; // decorate the property with @Input()
}

在子组件item-detail.component.html模板中添加:

<p>
  Today's item: {{item}}
</p>

配置父组件

在app.component.html中绑定item

<app-item-detail [item]="currentItem"></app-item-detail>

在父组件app.component.ts中

export class AppComponent {
    currentItem = 'Television';
  }

动态组件

指令

使用一个名叫 AdDirective 的辅助指令来在模板中标记出有效的插入点

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[adHost]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

加载组件

template: `
            <div class="ad-banner-example">
              <h3>Advertisements</h3>
              <ng-template adHost></ng-template>
            </div>
          `

解析组件

export class AdBannerComponent implements OnInit, OnDestroy {
    @Input() ads: AdItem[];
    currentAdIndex = -1;
    @ViewChild(AdDirective, {static: true}) adHost: AdDirective;
    interval: any;
  
    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
  
    ngOnInit() {
      this.loadComponent();
      this.getAds();
    }
  
    ngOnDestroy() {
      clearInterval(this.interval);
    }
  
    loadComponent() {
      this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
      const adItem = this.ads[this.currentAdIndex];
  
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
  
      const viewContainerRef = this.adHost.viewContainerRef;
      viewContainerRef.clear();
  
      const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
      componentRef.instance.data = adItem.data;
    }
  
    getAds() {
      this.interval = setInterval(() => {
        this.loadComponent();
      }, 3000);
    }
  }