angular2项目教程-微型Blog系统2

Route,Module,Component

静态路由

{

path:"echart",

component:ChartComponent

}

这样配置，依赖的组件全打包，会很大。

异步路由，就不会

loadChildren

——————————

架构思想

组件化，依赖注入，数据绑定

————————————————

双大括号和[(ngModel)]值绑定，()事件绑定

——————————————————————

组件间通讯

共享组件

给子组件传参数。

@Component({

selector: 'app-user-info',

templateUrl: './user-info.component.html',

styleUrls: ['./user-info.component.scss']

})

export class UserInfoComponent implements OnInit {

@Input()

public panelTitle:string;

}

根据不同的场景，传递进来

文章详情<app-user-info panelTitle="作者信息" (follow)="doFollow()"></app-user-info>

后台用户信息<app-user-info panelTitle="用户信息" (follow)="doFollow()"></app-user-info>

直接把panelTitle作为自定义标签的一个属性

——————————————————————————————

给父组件传值：

子组件定义一个

@Output()

public follow = new EventEmitter<string>();

父组件的<app-user-info panelTitle="作者信息" (follow)="doFollow()"></app-user-info>中的(follow)="doFollow()"

doFollow(){

alert("父组件监听子组件的事件...");

}

——————————————————————————

services进行通讯，同步登录状态，利用UserLoginService

不仅被注入到‘用户登录’组件，还被注入到post-detail-main.component.ts，UserLoginService是同一个实例

订阅同一个

ngOnInit() {

this.subscription=this.userLoginService.currentUser

当这个主题变化的时候，所有订阅的都会改变

public get currentUser():Observable<User>{

return this.subject.asObservable();

}

————————————————————————————————

生命周期钩子

ngOnInit //组件初始化完成之后，panelTitle才会有值

export class BooleanPipe implements PipeTransform {

实现一个PipeTransform 接口