Angular 2 Training


npm i

npm install -g @angular/cli 

npm install --save @angular/material


ng serve

material 控件库 material control

view ajax son structure

typescript just a typeStructure , 即只是增加了智能提示


Passing Query Parameters

Use the [queryParams] directive along with [routerLink] to pass query parameters. For example:

<a [routerLink]="['product-list']" [queryParams]="{ page: 99 }">Go to Page 99</a>

Alternatively, we can navigate programmatically using the Router service:

  goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { page: pageNum } });

The routerLinkActive directive

The Angular Router provides a routerLinkActive directive we can use to add a class to the HTML navigation element whose route matches the active route. All we have to do is define the style for it. Sweet!




    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>



Parameterized route

We can add the hero’s id to the URL. When routing to the hero whose id is 11, we could expect to see a URL such as this:


The /detail/ part of that URL is constant. The trailing numeric id part changes from hero to hero. We need to represent that variable part of the route with a parameter (or token) that stands for the hero’s id.

Configure a Route with a Parameter

Here’s the route definition we’ll use.



  path: 'detail/:id',
  component: HeroDetailComponent

The colon (:) in the path indicates that :id is a placeholder to be filled with a specific hero id when navigating to the HeroDetailComponent.





styleUrls: [‘style.scss’],

Angular 2 Component Route config

import component

What is the difference between formControlName and FormControl?

error / exception

Angular 2 component and modules!/note/detail/100000001220160929163217103!#aftercontent
接口 OnInit OnDestroy DoCheck OnChanges AfterContentInit AfterContentChecked AfterViewInit AfterViewChecked函数名 ngOnChanges – 当输入/输出绑定的值改变时调用 ngOnInit – 在第一次 ngOnChanges 后调用 ngDoCheck – 自定义的方法,检测和处理值的改变 ngAfterContentInit – 在组件内容初始化之后调用 ngAfterContentChecked – 组件每次检查内容时调用 ngAfterViewInit – 组件相应的视图初始化之后调用 ngAfterViewChecked – 组件每次检查视图时调用 ngOnDestroy – 指令销毁前调用。