angular2语法总结

1、ngStyle

基本用法

<div [ngStyle]="{'background-color':'green'}"></<div>

判断添加<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

2、ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类

基本用法

[ngClass]="{'text-success':true}"

判断

[ngClass]="{'text-success':username == 'zxc'}"[ngClass]="{'text-success':index == 0}"

3、例子循环显示的第一行添加text-danger样式，文字变红色

const arr = [1, 3, 4, 5, 6]<ul>    <li *ngFor="let item of arr, let i = index">        <span [ngClass]="{'text-danger': i==0}">{{item}}</span>    </li></ul>

可以在.angular.json里面引入index.html的css,js文件等

  "styles": [        "styles.css",        "../node_modules/admin-lte/boostarp/css/boostrap.css",        "../node_modules/dist/css/AdminLTE.min.css","../node_modules/dist/css/skins/skin-blue.min.css"

ts格式化代码   ctrl+shift+f      vs格式化代码ctrl+k+f

{path:'**',component:''} 这里表示页面不存在的时候匹配，可以是首页也可以是404

辅助路由

1、<router-outlet name="aux"></router-outlet>  2、重新写一个组件chat.component.ts   在里面定义样式页面内容 使之能和主页面放在一起

引入国际化中英文的使用

1、在app.module中导入translate包等

eg:

import { ReactiveFormsModule } from '@angular/forms';import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';

import { EqualValidator } from './user/user-register/directives/equal-validator.directive';//验证注册是否相同的

import { HttpModule,JsonpModule ,Http} from '@angular/http';

export function createTranslateLoader(http: Http) {    return new TranslateStaticLoader(http, './assets/i18n', '.json');}

//这里要自己到i18n里面去设置中英文的对照数组字段

@NgModule({ imports: [ ReactiveFormsModule,    HttpModule,    JsonpModule,    TranslateModule.forRoot({      provide: TranslateLoader,      useFactory: (createTranslateLoader),      deps: [Http]    }),]})

2、在app.component.ts中设置

import { Component, HostListener, ElementRef, Renderer, ViewContainerRef,OnInit } from '@angular/core';import { ActivatedRoute, Router, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot } from '@angular/router';import { TranslateService } from 'ng2-translate';import { UserLoginService } from './user/user-login/user-login.service';import { UserRegisterService } from './user/user-register/user-register.service';import { User } from './user/model/user-model';import 'rxjs/add/operator/merge';

import { ToastsManager } from 'ng2-toastr/ng2-toastr';//定义一系列的生命钩子针对当前用户   @Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})export class AppComponent implements OnInit {public currentUser: User;private globalClickCallbackFn: Function;private loginSuccessCallbackFn: Function;constructor(public elementRef: ElementRef,public renderer: Renderer,public router: Router,public activatedRoute: ActivatedRoute,public translate: TranslateService,public userLoginService: UserLoginService,public userRegisterService: UserRegisterService,public toastr: ToastsManager,public vcr: ViewContainerRef) {this.toastr.setRootViewContainerRef(vcr);console.log("什么也没有...");}ngOnInit() {this.globalClickCallbackFn = this.renderer.listen(this.elementRef.nativeElement, 'click', (event: any) => {console.log("全局监听点击事件>" + event);});this.currentUser = JSON.parse(localStorage.getItem("currentUser"));this.userLoginService.currentUser.merge(this.userRegisterService.currentUser).subscribe(data => {this.currentUser = data;let activatedRouteSnapshot: ActivatedRouteSnapshot = this.activatedRoute.snapshot;let routerState: RouterState = this.router.routerState;let routerStateSnapshot: RouterStateSnapshot = routerState.snapshot;console.log(activatedRouteSnapshot);console.log(routerState);console.log(routerStateSnapshot);//如果是从/login这个URL进行的登录，跳转到首页，否则什么都不做if (routerStateSnapshot.url.indexOf("/login") != -1) {this.router.navigateByUrl("/home");}},error => console.error(error));this.translate.addLangs(["zh", "en"]);this.translate.setDefaultLang('zh');const browserLang = this.translate.getBrowserLang();console.log("检测到的浏览器语言>" + browserLang);this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');}ngOnDestroy() {if (this.globalClickCallbackFn) {this.globalClickCallbackFn();}}toggle(button: any) {console.log(button);}public doLogout(): void {this.userLoginService.logout();this.toastr.success('退出成功！','系统提示');this.router.navigateByUrl("");}}

3、由于是将这些东西放在根目录的。所以后面使用到translate的模块也争取放在根目录不然会找不到定义的translate

4  angular2改变端口号

找到node_modules/angular-cli/lib/config/schema.json
default值就是默认的端口
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"serve": {
 "description": "Properties to be passed to the serve command",
 "type": "object",
 "properties": {
  "port": {
  "description": "The port the application will be served on",
  "type": "number",
  "default": 4200
  },
  "host": {
  "description": "The host the application will be served on",
  "type": "string",
  "default": "localhost"
  }
 }
 }
}
也可以通过命令行方式修改，如：
ng serve --port 4201

摘自：http://www.jb51.net/article/111526.htm

5  input中的name属性名不能重复，不然不会报错但是后面显示有问题，不能让input框显示为绑定的数据，它会显示一个一样的，预计是最后一个的绑定数据，

解决方法，用
[ngModelOptions]="{standalone: true}"