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}"