今天完成的事情

今天好像只是简短的思考了一下人生，也没有干什么重要的事情。

明天计划的事情

看一下Angular里面关于打包发布的部分；
看observable subject eventemitor 的东西。

遇到的问题

今天试着将Angular的应用打包了一下，放到线上之后出不来文件，一直显示:加载中......，这个问题可能是因为我nginx配置的根目录不在Angular当前的目录下，应用的index页面是通过任务列表的index.html文件跳转过来的，由于这个原因卡在加载页面进不来，后来就nginx的根目录广阔Angular index.html目录下，文件才加载成功。
当文件成功加载后有显现出来另一个问题，主页文件由两个巨大的js文件，一个5.2M，另一个2.3M这么大的文件直接导致在加载页面的时候需要1.5min，这个问题可能是由于我的应用只写了一个模块，无法实现懒加载，但是这个应该是有办法解决的，明天再看看有没有什么好的方法。

收获

说起收获真实一个忧伤的故事。

来看看这个我还没有在应用中使用的装饰器吧。

Angular 2 ViewChild & ViewChildren

1. ViewChild

ViewChild是属性装饰器，从模板视图中获匹配的元素。视图查询在ngAfterViewInit钩子函数调用前完成，因此在ngAfteriewInit钩子函数中，才能正确获取查询的元素。
@ViewChild使用模板变量名

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p #greet>Hello {{ name }}</p>
  `,
})
export class AppComponent {
  name: string = 'Semlinker';
  @ViewChild('greet')
  greetDiv: ElementRef;   // 获取greet
  ngAfterViewInit() {
    console.dir(this.greetDiv);  // 打印获取值
  }
}

@ViewChild使用模板变量名及设置查询条件

import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <template #tpl>
      <span>I am span in template</span>
    </template>
  `,
})
export class AppComponent {
  @ViewChild('tpl')
  tplRef: TemplateRef<any>;
  @ViewChild('tpl', { read: ViewContainerRef })
  tplVcRef: ViewContainerRef;
  ngAfterViewInit() {
    console.dir(this.tplVcRef);
    this.tplVcRef.createEmbeddedView(this.tplRef);
  }
}

@ViewChild使用类型查询

// child.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'exe-child',
    template: `
      <p>Child Component</p>  
    `
})
export class ChildComponent {
    name: string = 'child-component';
}
// app.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-child></exe-child>
  `,
})
export class AppComponent {
  @ViewChild(ChildComponent)
  childCmp: ChildComponent;   // 这里取得的是整个子组件，可以直接使用子组件中的方法。
  ngAfterViewInit() {
    console.dir(this.childCmp);
  }
}

2. ViewChildren

ViewChildren用来从视图模板中获取匹配的多个元素，返回的结果是一个QueryList集合。

@ViewChildren使用类型查询

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-child></exe-child>
    <exe-child></exe-child>
  `,
})
export class AppComponent {
  @ViewChildren(ChildComponent)
  childCmps: QueryList<ChildComponent>;
  ngAfterViewInit() {
    console.dir(this.childCmps);
  }
}