angular部分知识总结

最新推荐文章于 2022-02-22 14:20:12 发布

水痕01

最新推荐文章于 2022-02-22 14:20:12 发布

阅读量645

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/kuangshp128/article/details/75499143

版权

angular 专栏收录该内容

44 篇文章 6 订阅

订阅专栏

一、添加`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、注入方式跟上面的一样

十四、在实际项目开发中,把处理服务类的逻辑写在服务层中,组件中只负责服务的注入,调用服务层的方法

水痕01

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular部分知识总结

一、添加class1、[class.className]=fn()如果函数fn返回true表示会添加一个样式，如果返回为false则不添加样式二、关于子组件传递参数到父组件1、指定一个输出参数 javascript @Output() outputName[输出字段] = new EventEmitter() 2、为输出对象创建一个一个EventEmitter()见上面3、在子组件的视
复制链接

扫一扫