Component类似flask app下面的每个blueprint。

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();
}
}

@Component 说明了两个路径,

1 /templates/每个blueprint下的用 jinja

2 语法的XXX.html,2 /static/下的 css

也可以直接把模板内容和css直接写在@Component下面,这时Component有点类似Unity3d里的gameobject,@Component里面的“selector,template” 有点类似gameobject里的“transfrom”,"material"。(U3d里是gameobject->component  不要和ng的Component混了)。

区别在于:flask强调"动静分离"。这样部署的时候,static部分用nginx, web api部分 用 gunicorn。

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()...由引擎在特定时机调用调用。

命名

注意命名方法 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属性绑定到HeroDetailComponenthero属性上。

这种绑定(协调主视图AppComponent与HeroDetailComponent的方式)是这样的:

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

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

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

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

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

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

最新文章

  1. tomcat映射路径的配置方法
  2. struts2 配置 struts.xml 提示
  3. IOS第八天(2:UITableViewController团购,点击底部,xib加载更多, 代理模式)
  4. (转) CCTextFieldTTF输入框
  5. POJ----(3974 )Palindrome [最长回文串]
  6. 参加2013中国大数据技术大会(BDTC2013)
  7. 【转】ChainMapper 实例理解一
  8. 遍历List/Map的时候删除成员遇到的奇怪问题
  9. apache环境下配置服务器支持https
  10. Ubuntu 下安装VNC server
  11. IPointCollection转IPolyline
  12. 警惕:利用Dropbox链接散播的恶意软件
  13. FFmpeg示例程序合集-Git批量获取脚本
  14. 详解ebs接口之客户配置文件导入(二)
  15. js 数组随机洗牌
  16. 如何关闭tornado.web的Application
  17. java 命令查字节码文件, 查.class文件内容
  18. 【腾讯Bugly干货分享】人人都可以做深度学习应用:入门篇
  19. 使用Eclipse创建SpringBoot项目
  20. 解决ansible上传速度慢的问题

热门文章

  1. Jstorm可靠性分析
  2. centos6.5 用户管理
  3. Netty
  4. 电路相关知识--读&lt;&lt;继电器是如何成为CPU的&gt;&gt;
  5. vs2010统计项目代码总行数
  6. 弹出框二 之 bootbox.js
  7. java代码获知该方法被哪个类、哪个方法、在哪一行调用
  8. Oracle 11gR2 安装教学
  9. mysql 5.7.15发布
  10. 经纬Zhang英拉垫背的企业家VC没有到这种地步这么卑鄙
  11. 对SNS网站现状和未来的一些想法&mdash;&mdash;以我对人人网的体验为例
  12. iOS开发中视图控制器ViewControllers之间的数据传递
  13. PHPEXCEL实例-导出EXCEL
  14. 使用JavaScript验证用户输入的是否为正整数
  15. 前台的url通过 ActionName?var1=xx&amp;var2=yy 的形式传给特定action
  16. 【LeetCode每天一题】Find First and Last Position of Element in Sorted Array(找到排序数组中指定元素的开始和结束下标)
  17. 安装adt插件后工具栏不显示android相关图标
  18. LeetCode:Sqrt(x) 解题报告
  19. Java代理(一)
  20. linux服务器上没有jar命令