[武汉|结业弟子]JS-周恒光|2017年06月23日的日报-技能树.IT修真院

发表于： 2017-06-23 23:39:13

1 826

今天完成的事情：

解释一下控制器controller的概念：

是一个普通的ts类export class，会被@component装饰器装饰，包含组件所有的属性和方法。通过数据绑定与模板进行通信，模板展现控制器的数据，控制器处理模板上发生的事件。

import引入装饰器，通过装饰器附加元数据到一个ts类，告诉angular是一个组件。这个组件就是控制器。

ts类里的构造函数constructor

主要做初始化操作，在进行类实例化操作时会被自动调用

class AppComponent {
constructor(name) {
console.log('初始化');
this.name = name;
}
}

let appCmp = new AppComponent('AppCmp');
console.log(appCmp.name); 

结果是：

初始化

Appcmp

ngOnlnit

ngOnInit 是 Angular 2 组件生命周期中的一个钩子，Angular 2 中的所有钩子和调用顺序如下：

ngOnChanges - 当数据绑定输入属性的值发生变化时调用

ngOnInit - 在第一次 ngOnChanges 后调用

ngDoCheck - 自定义的方法，用于检测和处理值的改变

ngAfterContentInit - 在组件内容初始化之后调用

ngAfterContentChecked - 组件每次检查内容时调用

ngAfterViewInit - 组件相应的视图初始化之后调用

ngAfterViewChecked - 组件每次检查视图时调用

ngOnDestroy - 指令销毁前调用

其中 ngOnInit 用于在 Angular 获取输入属性后初始化组件，该钩子方法会在第一次 ngOnChanges 之后被调用。且只会被调用一次

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

@Component({
selector: 'my-app',
template: `
<h1>Angular</h1>
<p>Hello {{name}}</p>
`,
})
export class AppComponent implements OnInit {

name: string = '';

constructor() {
console.log('初始化');
this.name = 'haha';
}

ngOnInit() {
console.log('调用');
}
}

结果：

初始化

调用

父组件和子组件传参

父：

import { Component } from '@angular/core';

@Component({
selector: 'exe-parent',
template: `
<h1>Angular/h1>
<p>Hello {{name}}</p>
<exe-child [pname]="name"></exe-child>
`,
})
export class ParentComponent {
name: string = '';

constructor() {
this.name = 'haha';
}
}

子：

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

@Component({
selector: 'exe-child',
template: `
<p>父组件的名称：{{pname}} </p>
`
})
export class ChildComponent implements OnInit {
@Input()
pname: string; // 父组件的名称

constructor() {
console.log('ChildComponent constructor', this.pname); // Output：undefined
}

ngOnInit() {
console.log('ChildComponent ngOnInit', this.pname);
}