一、添加class
- 1、
[class.className]=fn()
如果函数fn
返回true
表示会添加一个样式,如果返回为false
则不添加样式
二、关于子组件传递参数到父组件
-
1、指定一个输出参数
@Output() outputName[输出字段] = new EventEmitter()
- 2、为输出对象创建一个一个
EventEmitter()
见上面 -
3、在子组件的视图中定义事件及书写事件方法
<a href="#" class="btn btn-warning" (click)="increase()">增加</a>
increase():boolean{ this.count += 1; this.foo.emit(this.count); //emit里面的就是要发送给父组件的 return false; }
-
4、在父组件中使用子组件输出的
foo
<app-inventory (foo)="bar($event)"></app-inventory>
bar(event:any):void{ console.log(event); }
三、在使用图片的时候
- 1、
src="{{urlName}}"
- 2、
[src]="usrName"
建议使用第二种方式
四、在{{}}
可以使用三目运算
<p>
<ng-container *ngFor="let nav of navs;let i = index" >
<a href="">{{nav}}</a>
<span>{{i < (navs.length - 1) ? '>':''}}</span>
</ng-container>
</p>
五、关于ng-container
标签的使用,不能直接放在外面,需要有标签包裹
六、关于路由的总结
-
1、在
app
文件夹下创建一个单独的文件写路由配置(app.router.ts
)import {Routes} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {AboutComponent} from './about/about.component'; import {ContactComponent} from './contact/contact.component'; export const rootRouterConfig: Routes = [ {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'about', component: AboutComponent}, {path: 'contact', component: ContactComponent} ];
-
2、在
app
文件夹下的app.module.ts
添加创建的路由imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, {useHash: true}),//兼容老版本浏览器的HashLocationStrategy //RouterModule.forRoot(rootRouterConfig) 这个是angular中默认的路由策略,使用pathLocationStrategy ],
3、配置
router-outlet
插座来装载展示的路由文件-
4、使用
[routerLink]="['xxx']"
进行路由跳转(xxx
就在路由文件中配置的path
)<div class="row"> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item"><a [routerLink]="['home']" routerLinkActive="active">home</a></li> <li class="list-group-item"><a [routerLink]="['about']" routerLinkActive="active">about</a></li> <li class="list-group-item"><a [routerLink]="['contact']" routerLinkActive="active">contact</a></li> </ul> </div> <div class="col-md-9"> <router-outlet></router-outlet> </div> </div>
- 5、使用
routerLinkActive="className"
来显示当前选择的路由样式
七、关于在ts
文件中操作路由的切换的方式
-
1、使用
navigate
进行跳转... constructor(private router: Router) { } ngOnInit() { } page1(){ this.router.navigate(['/about']); } ...
-
2、使用
navigateByUrl
进行跳转.... constructor(private router: Router) { } page2(){ this.router.navigateByUrl('about'); } ....
八、关于路由中传递的参数(path
)方式
-
1、在路由中定义存放参数的位置
export const rootRouterConfig: Routes = [ {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'about/:id', component: AboutComponent}, {path: 'contact/:id1/:id2', component: ContactComponent} ];
-
2、在页面跳转
[routerLink]
中传递参数<ul class="list-group"> <li class="list-group-item"><a [routerLink]="['home']" routerLinkActive="active">home</a></li> <li class="list-group-item"><a [routerLink]="['about',1]" routerLinkActive="active">about</a></li> <li class="list-group-item"><a [routerLink]="['contact',1,2]" routerLinkActive="active">contact</a></li> </ul>
3、运行效果
-
4、获取到
[routerLink]
传递的参数(使用ActivatedRoute
)export class ContactComponent implements OnInit { constructor(private route: ActivatedRoute) { route.params.subscribe(params => { console.log(params); //获取到的传递过来的id可以进行下一步操作 }); } ngOnInit() { } }
九、关于query
传递参数的获取
-
1、直接在页面的
[routerLink]="['xx']"
后面加上[queryParams]=""
<li class="list-group-item"><a [routerLink]="['about']" [queryParams]="{id:1,name:'hello',age:20}" routerLinkActive="active">about</a></li>
-
2、在
ts
文件中获取参数constructor(private route: ActivatedRoute) { route.queryParams.subscribe((queryParams) => { console.log(queryParams); }); }
- 3、运行效果
十、关于ts
中点击跳转传递参数
-
1、使用
navigate
进行传递path
参数constructor(private router: Router) { } page3(){ this.router.navigate(['/contact', 10, 20]); }
-
2、使用
navigateByUrl
进行传递path参数constructor(private router: Router) { } page4(){ this.router.navigateByUrl('contact/20/30'); }
-
3、使用
navigate
传递query
参数constructor(private router: Router) { } page1(){ this.router.navigate(['/about'], {queryParams: { 'id': '10', 'name': 'word', 'age': '30'}}); }
-
4、使用
navigateByUrl
传递query
参数constructor(private router: Router) { } page2(){ this.router.navigateByUrl('about?id=10&name=hello&age=20'); }
十一、依赖注入的步骤
- 1、创建一个服务
ng g s services/服务名称
(服务统一放在服务文件夹中) - 2、在
app.module.ts
中或者组件中的providers: []
注入要实例化的对象 - 3、在需要注入的组件中的
constructor
注入
十二、关于注入器与提供器的认识
-
1、注入器就是在组件中的
constructor
注入的-
1、普通的注入
constructor(private product: ProductService) { }
-
2、显示的注入
constructor(@Inject('SizeService') private sizeService: any) {}
-
-
2、提供器就是在
app.module.ts
中或者组件中的providers: []
-
1、
token
的值就是类本身providers: [ ProductService ]
-
2、指定
tokend
和实现的类providers: [ { provide: Product1Service, useClass: Product1Service } ],
-
3、使用工厂实现(可以在工厂中做一些逻辑处理)
providers: [ { provide: Product1Service, useClass: Product1Service }, { provide: Product1Service, useFactory: (logger: LoggerService) => { // 处理逻辑 }, deps: [LoggerService] // 依赖注入的服务 }, LoggerService ],
-
4、注入一个常量或者对象的服务
providers: [ ProductService, { provide: Product1Service, useClass: Product1Service }, { provide: Product1Service, useFactory: (logger: LoggerService, IS_DEV, IS_OBJECT) => { // 处理逻辑 }, deps: [LoggerService, 'IS_DEV'] // 依赖注入的服务 }, LoggerService, { provide: 'IS_DEV', useValue : false }, { provide: 'IS_OBJECT', useValue: {'is_save': true} } ],
-
十三、服务中注入服务
- 1、必须在被注入的服务的类前面加上
@Injectable
- 2、注入方式跟上面的一样