从flask视角理解angular（二）Blueprint VS Component

import ‘rxjs/add/operator/switchMap‘;
import { Component, OnInit }        from ‘@angular/core‘;
import { ActivatedRoute, ParamMap } from ‘@angular/router‘;
import { Location }                 from ‘@angular/common‘;

import { Hero }         from ‘./hero‘;
import { HeroService }  from ‘./hero.service‘;
@Component({
  selector: ‘hero-detail‘,
  templateUrl: ‘./hero-detail.component.html‘,
  styleUrls: [ ‘./hero-detail.component.css‘ ]
})
export class HeroDetailComponent implements OnInit {
  hero: Hero;

  constructor(
    private heroService: HeroService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.route.paramMap
      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get(‘id‘)))
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    this.location.back();
  }
}

angular的“前后端”统统用ts/js搞了。这样开发者不需要太在乎“动静”与“前后"的分野。封装程度类似unity3d里的prefab，感觉很不错。

定义

每次开头都要导入Component

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

类似blueprint：

from flask import Blueprint

导出

            export class AppComponent {
  title = ‘Tour of Heroes‘;
  hero = ‘Windstorm‘;
}
        

类似

user_blueprint = Blueprint(‘user‘, __name__, url_prefix=‘/user‘)

OnInit

不同于构造函数constructor。

import { OnInit } from ‘@angular/core‘;

export class AppComponent implements OnInit {
  ngOnInit(): void {
  }
}

感觉constructor类似于python的__new__() 而ngOnInit()类似于通常使用的__init__(self)

 看介绍：

只要我们实现了 Angular 的 ngOnInit 生命周期钩子，Angular 就会主动调用这个钩子。 Angular提供了一些接口，用来介入组件生命周期的几个关键时间点：刚创建时、每次变化时，以及最终被销毁时。

 又有点像unity3d的Monobehaviour的 Awake() Start() Update()...由引擎在特定时机调用调用。

——不要被生命周期钩子（lifecycle hook）之类的名词吓倒。

在实干派野生程序员这里，不要过于在意这些唬人的新名词。

要敢于看它是怎么回事，然后类比到自己熟悉的概念和机制上，软件工程的世界里，没有那么多概念，范畴级的发明创造。

在python里，可以不需要知道__init__(self)是不是构造函数，反正当构造函数来用；

在unity3d里不需要纠结Awake() Start()该叫什么名，反正大概知道该塞什么进去就OK了。

命名

注意命名方法 HeroDetailComponent 大概类似于把蓝图对象命名为HeroDetailBlueprint

文件名和组件名遵循风格指南中的标准方式。

• 组件的类名应该是大驼峰形式，并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。

  The component class name should be written in upper camel case and end in the word "Component". The hero detail component class is HeroDetailComponent.

• 组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.component.ts文件中。

引用Componet视图

父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄， 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponent的hero属性上。

这种绑定（协调主视图AppComponent与HeroDetailComponent的方式）是这样的：

<hero-detail [hero]="selectedHero"></hero-detail>

在等号的左边，是方括号围绕的hero属性，这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。

1 把AppComponent的selectedHero属性绑定到HeroDetailComponent的input 属性hero上。表示了传输关系

2 <hero-detail>是HeroDetailComponent 的 @Component里的selector。

这样的好处是，不用在AppComponent里显示引用HeroDetailComponent。只要[hero]是declaration过的某个Component里的input属性就OK了。

——这个比较别扭但又很巧妙。

原文：http://www.cnblogs.com/xuanmanstein/p/7616653.html