從ng-repeat到NgFor

看這篇文章基本明白怎么渲染模板，但是我的工程會報錯說#號非法，這篇的寫法也不好用。

angular2.0.0的語法集：

Angular for TypeScript 語法快速指南 (基於2.0.0版本)

 

引導	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);	使用JIT編譯器引導一個AppModule模塊定義的應用

NgModules	import { NgModule } from '@angular/core';
@NgModule({ declarations: ..., imports: ...,      exports: ..., providers: ..., bootstrap: ...}) class MyModule {}	定義一個模塊，其中包括組件、指令、管道和提供商。
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]	一個數組，包括從屬於當前模塊的組件、指令和管道。
imports: [BrowserModule, SomeOtherModule]	一個數組，包括被導入到當前模塊中的所有模塊。來自被導入模塊的declarations也同樣對當前模塊有效。
exports: [MyRedComponent, MyDatePipe]	一個數組，包括對導入當前模塊的模塊可見的組件、指令、管道。
providers: [MyService, { provide: ... }]	一個數組，包括在對前模塊及導入當前模塊的模塊中的內容物（組件、指令、管道、提供商等）可見的依賴注入提供商。
bootstrap: [MyAppComponent]	一個數組，包括由當前模塊引導時應該引導的組件

模板語法
<input [value]="firstName">	把屬性value綁定到表達式firstName的結果。
<div [attr.role]="myAriaRole">	把role這個Attribute綁定到表達式 myAriaRole的結果。
<div [class.extra-sparkle]="isDelightful">	把元素是否出現CSS類extra-sparkle，綁定到一個表達式isDelightful的結果是否為真。
<div [style.width.px]="mySize">	把樣式的width屬性綁定到表達式mySize的結果，以px為單位。這個單位是可選的。
<button (click)="readRainbow($event)">	當按鈕(及其子元素)上的click事件被觸發時，調用readRainbow方法，並把事件對象作為參數傳入。
<div title="Hello {{ponyName}}">	把屬性綁定到一個插值表達式字符串，比如 "Hello Seabiscuit"。它等價於： <div [title]="'Hello ' + ponyName">
<p>Hello {{ponyName}}</p>	把文本內容綁定到一個插值表達式，比如 "Hello Seabiscuit".
<my-cmp [(title)]="name">	設置雙向數據綁定。等價於：<my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...>   <button (click)="movieplayer.play()"> </video>	創建一個局部變量 movieplayer ，它提供到video元素實例的訪問，可用於當前模板中的數據綁定和事件綁定表達式中。
<p *myUnless="myExpression">...</p>	*符號表示當前元素將被轉變成一個內嵌模板。等價於： <template [myUnless]="myExpression"><p>...</p></template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>	通過名叫myCardNumberFormatter的管道，轉換表達式的當前值cardNumber。
<p>Employer: {{employer?.companyName}}</p>	安全導航運算符(?.)表示employer字段是可選的，如果它是undefined，表達式剩下的部分將被忽略
<svg:rect x="0" y="0" width="100" height="100"/>	SVG模板需要在它們的根節點上帶一個svg:前綴，以消除模板中HTML元素和SVG元素的歧義。
<svg>   <rect x="0" y="0" width="100" height="100"/> </svg>	<svg>元素在無需前綴的情況下，也能被自動檢測為SVG。

內置指令	import { CommonModule } from '@angular/common';
<section *ngIf="showSection">	基於showSection表達式的值移除或重新創建部分DOM樹。
<li *ngFor="let item of list">	把li元素及其內容轉化成一個模板，並用它來為列表中的每個條目初始化視圖。
<div [ngSwitch]="conditionExpression">   <template [ngSwitchCase]="case1Exp">...</template>   <template ngSwitchCase="case2LiteralString">...</template>   <template ngSwitchDefault>...</template> </div>	基於conditionExpression的當前值，從內嵌模板中選取一個，有條件的切換div的內容。
<div [ngClass]="{active: isActive, disabled: isDisabled}">	把一個元素上CSS類的出現與否，綁定到一個真值映射表上。右側的表達式應該返回類似{class-name: true/false}的映射表。

表單	import { FormsModule } from '@angular/forms';
<input [(ngModel)]="userName">	提供雙向綁定，為表單控件提供解析和驗證。

類裝飾器	import { Directive, ... } from '@angular/core';
@Component({...}) class MyComponent() {}	聲明當前類是一個組件，並提供關於該組件的元數據。
@Directive({...}) class MyDirective() {}	聲明當前類是一個指令，並提供關於該指令的元數據。
@Pipe({...}) class MyPipe() {}	聲明當前類是一個管道，並且提供關於該管道的元數據。
@Injectable() class MyService() {}	聲明當前類有一些依賴，當依賴注入器創建該類的實例時，這些依賴應該被注入到構造函數中。

指令配置	@Directive({ property1: value1, ... })
selector: '.cool-button:not(a)'	指定一個CSS選擇器，以便在模板中找出該指令。支持的選擇器包括element, [attribute], .class, 和 :not()。 不支持父子關系選擇器。
providers: [MyService, { provide: ... }]	為當前指令及其子指令提供依賴注入的providers數組。

組件配置	@Component擴展了@Directive, 以便@Directive中的配置項也能用在組件上
moduleId: module.id	如果設置了，templateUrl和styleUrl會被解析成相對於組件的。
viewProviders: [MyService, { provide: ... }]	依賴注入provider的數組，局限於當前組件的視圖中。
template: 'Hello {{name}}' templateUrl: 'my-component.html'	當前組件視圖的內聯模板或外部模板地址
styles: ['.primary {color: red}'] styleUrls: ['my-component.css']	內聯CSS樣式或外部樣式表URL的列表，用於給組件的視圖添加樣式。

供指令類或組件類用的字段裝飾器。	import { Input, ... } from '@angular/core';
@Input() myProperty;	聲明一個輸入屬性，以便我們可以通過屬性綁定更新它。(比如：<my-cmp [my-property]="someExpression">).
@Output() myEvent = new EventEmitter();	聲明一個輸出屬性，以便我們可以通過事件綁定進行訂閱。(比如：<my-cmp (my-event)="doSomething()">).
@HostBinding('[class.valid]') isValid;	把宿主元素的屬性(比如CSS類：valid)綁定到指令/組件的屬性(比如：isValid)。
@HostListener('click', ['$event']) onClick(e) {...}	通過指令/組件的方法(例如onClick)訂閱宿主元素的事件(例如click)，可選傳入一個參數($event)。
@ContentChild(myPredicate) myChildComponent;	把組件內容查詢(myPredicate)的第一個結果綁定到類的myChildComponent屬性。
@ContentChildren(myPredicate) myChildComponents;	把組件內容查詢(myPredicate)的全部結果，綁定到類的myChildComponents屬性。
@ViewChild(myPredicate) myChildComponent;	把組件視圖查詢(myPredicate)的第一個結果綁定到類的myChildComponent屬性。對指令無效。
@ViewChildren(myPredicate) myChildComponents;	把組件視圖查詢(myPredicate)的全部結果綁定到類的myChildComponents屬性。對指令無效。

指令和組件的變更檢測與生命周期鈎子	(作為類方法實現)
constructor(myService: MyService, ...) { ... }	類的構造函數會在所有其它生命周期鈎子之前調用。使用它來注入依賴，但是要避免用它做較重的工作。
ngOnChanges(changeRecord) { ... }	在輸入屬性每次變化了之后、開始處理內容或子視圖之前被調用。
ngOnInit() { ... }	在執行構造函數、初始化輸入屬性、第一次調用完ngOnChanges之后調用。
ngDoCheck() { ... }	每當檢查組件或指令的輸入屬性是否變化時調用。通過它，可以用自定義的檢查方式來擴展變更檢測邏輯。
ngAfterContentInit() { ... }	當組件或指令的內容已經初始化、ngOnInit完成之后調用。
ngAfterContentChecked() { ... }	在每次檢查完組件或指令的內容之后調用。
ngAfterViewInit() { ... }	當組件的視圖已經初始化完畢，每次ngAfterContentInit之后被調用。只適用於組件。
ngAfterViewChecked() { ... }	每次檢查完組件的視圖之后調用。只適用於組件。
ngOnDestroy() { ... }	在所屬實例被銷毀前，只調用一次。

依賴注入配置
{ provide: MyService, useClass: MyMockService }	把MyService類的提供商設置或改寫為MyMockService。
{ provide: MyService, useFactory: myFactory }	把MyService的提供商設置或改寫為myFactory工廠函數。
{ provide: MyValue, useValue: 41 }	把MyValue的提供商設置或改寫為值41。

路由與導航	import { Routes, RouterModule, ... } from '@angular/router';
const routes: Routes = [   { path: '', component: HomeComponent },   { path: 'path/:routeParam', component: MyComponent },   { path: 'staticPath', component: ... },   { path: '**', component: ... },   { path: 'oldPath', redirectTo: '/staticPath' },   { path: ..., component: ..., data: { message: 'Custom' } } ]); const routing = RouterModule.forRoot(routes);	為應用配置路由。支持靜態、參數化、重定向和通配符路由。還支持自定義路由數據和解析。
<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet>	標記一個位置，用於加載當前激活路由的組件。
<a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor">	基於路由指令創建指向不同視圖的鏈接，由路由路徑、必選參數、可選參數、查詢參數和片段（fragment）組成。添加“/”前綴可以導航到根路由。添加“./”前綴可以導航到子路由。添加“../sibling”前綴可以導航到兄弟路由或父路由。
<a [routerLink]="[ '/path' ]" routerLinkActive="active">	當routerLink被激活時，就把指定的CSS類添加到該元素上。
class CanActivateGuard implements CanActivate {     canActivate(       route: ActivatedRouteSnapshot,       state: RouterStateSnapshot     ): Observable<boolean>|Promise<boolean>|boolean { ... } } { path: ..., canActivate: [CanActivateGuard] }	一個用來定義類的接口，路由器會首先調用它來決定是否應該激活該組件。應該返回布爾值或能解析為布爾值的可觀察對象(Observable)或承諾(Promise)。
class CanDeactivateGuard implements CanDeactivate<T> {     canDeactivate(       component: T,       route: ActivatedRouteSnapshot,       state: RouterStateSnapshot     ): Observable<boolean>|Promise<boolean>|boolean { ... } } { path: ..., canDeactivate: [CanDeactivateGuard] }	一個用來定義類的接口，路由器在導航后會首先調用它來決定是否應該取消該組件的激活狀態。應該返回布爾值或能解析為布爾值的可觀察對象(Observable)或承諾(Promise)。
class CanActivateChildGuard implements CanActivateChild {     canActivateChild(       route: ActivatedRouteSnapshot,       state: RouterStateSnapshot     ): Observable<boolean>|Promise<boolean>|boolean { ... } } { path: ..., canActivateChild: [CanActivateGuard],     children: ... }	一個用來定義類的接口，路由器會首先調用它來決定是否應該激活該子路由。應該返回布爾值或能解析為布爾值的可觀察對象(Observable)或承諾(Promise)。
class ResolveGuard implements Resolve<T> {     resolve(       route: ActivatedRouteSnapshot,       state: RouterStateSnapshot     ): Observable<any>|Promise<any>|any { ... } } { path: ..., resolve: [ResolveGuard] }	一個用來定義類的接口，路由器會在渲染該路由之前先調用它來解析路由數據。應該返回一個值或能解析為值的可觀察對象(Observable)或承諾(Promise)。
class CanLoadGuard implements CanLoad {     canLoad(       route: Route     ): Observable<boolean>|Promise<boolean>|boolean { ... } } { path: ..., canLoad: [CanLoadGuard], loadChildren: ... }	一個用來定義類的接口，路由器會首先調用它來決定一個惰性加載的模塊是否應該被加載。應該返回布爾值或能解析為布爾值的可觀察對象(Observable)或承諾(

 

然后做了個練習：

如果照某些例子 import {Component,OnInit, NgFor, NgIf} from "@angular/core";//會報錯

(1,27): error TS2305: Module '"F:/work/vs1/node_modules/@angular/core/index"' has no exported member 'NgFor'.
...

[0] (1,34): error TS2305: Module '"F:/work/vs1/node_modules/@angular/core/index"' has no exported member 'NgIf'.
[0] Child html-webpack-plugin for "index.html":

export class AmwayComponent implements OnInit{
    errorMessage:string;
    amwayData:any;
    
    constructor(private _globalService: GLobalService,private _uIHelperService:UIHelperService) {}
    
    ngOnInit() {
        let requestParams = new URLSearchParams();
        requestParams.set('id', '22222');
        this._globalService.ajaxCallerGet(this._globalService.getServiceURL('amway'), requestParams).subscribe(
            (data) => {    
                this.amwayData=data;    
                console.log("amway page data:::"+ data,this.amwayData);
            },
            error => this.errorMessage = <any>error
        );
    }
}

NgFor 和 NgIf 現在在Component里，不需要單獨提出來導入， OnInit是用來導入data的方法。

export const htmlTemplate = `
    <div id = "amway">
        <img class="logo" src="{{amwayData?.logo}}">
        <div class="slogan">
            <p *ngFor="let slogan of amwayData?.slogans">{{slogan}}</p>
        </div>
        <div class="nav">
            <a *ngFor="let nav of amwayData?.navs">
              {{nav.name}}
            </a>
        </div>
        <div class="inner_content">
            <div class="left">
                <ul>
                    <li class="title">{{amwayData?.left.title}}</li>
                    <li *ngFor="let list of amwayData?.left.lists">
                        <p class="name">{{list.name}}</p>
                        <div class="subs" *ngIf="list.subs">
                            <p class="sub" *ngFor="let sub of list.subs">
                                {{sub}}
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <p class="crumbs">
                    <span *ngFor="let crumb of amwayData?.right.crumbs">{{crumb}}</span>
                <p>
                <div class="inner_right">
                    <p class="table_top">
                    {{amwayData?.right.table_top}}
                    <p>
                    <p class="table_info"></p>
                </div>
            </div>
        </div>
    </div>
`;

data是這樣的：

{
    "logo": "assets/images/logo.png",
    "slogans": ["您好，","某某"],
    "top": ["我的賬戶", "快速選購", "購物籃", "中心", "登出", "English"],
    "navs": [{ "name": "紐崔萊" }, { "name": "雅姿" }, { "name": "個人護理" },
{ "name": "家居護理" }, { "name": "家居科技" }, { "name": "其他產品" }, { "name": "優惠" }, 
{ "name": "產品配件" }, { "name": "XS" }],
    "left": { "title": "業績報告", "lists": [{ "name": "積分查詢", "subs": ["個人", "組內"] }, 
{ "name": "推薦先機獎金報告下載" }, { "name": "未送貨訂單資料壹組" }, { "name": "電子購貨單" }, 
{ "name": "組內尚未使用指優惠券記錄" }, { "name": "個人業績記錄" }, { "name": "推薦記錄" }, 
{ "name": "個人獎勵記錄" }, { "name": "直銷商/優惠顧客狀況查詢" }, { "name": "個人及組員資料查詢" }, 
{ "name": "個人優惠券" }, { "name": "個人訂單" }, { "name": "業務拓展非/電子 優惠 - - 概覽" }, 
{ "name": "業務拓展非/電子 優惠 - - 直系小組縱覽" }] },
    "right": {
        "crumbs": ["首頁 > ", "業務資訊 > ", "業績報告 > ", "積分查詢 > ", "組內"],
        "table_top":"組內",
        "search": ["搜尋直銷商", "優惠顧客編號", "搜尋"],
        "table": ["本月積分記錄", "獎金月份", "更新日期", "積分查詢", "直銷商/優惠顧客編號", 
　　　　　　　　　　"直銷商/優惠顧客姓名", "戶籍類別", "組內積分額", "加入日期", "轉型日期"]
    }
}