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 接口 

原文链接：https://www.f2er.com/angularjs/147791.html

猜你在找的Angularjs相关文章