杂-笔记

cookieservice

import { CookieService } from 'ngx-cookie-service';

private cookies: CookieService

存储cookie
this.cookieService.set("userId",this.userId));

获取cookie
this.cookieService.get("userId");

删除cookie
this.cookieService.delete("userId");

路由传参
public activeRote:ActivatedRoute

<a [routerLink]="['/hero', hero.id]">
<a [routerLink]="['/hero', { foo: 'foo' }]">Crisis Center</a>

{ path: 'hero/:id', component: HeroDetailComponent }

{ path: 'hero/:id', component: HeroDetailComponent, data: { animation: 'hero' } }
 data 属性是存放与该特定路由关联的任意数据的地方。每个激活的路由都可以访问 data 属性。可以用它来存储页面标题，面包屑文本和其它只读静态数据等项目。你可以尝试使用解析器守卫来检索动态数据。

<a routerLinkActive="active">Heroes</a>
RouterLinkActive 点击当前a标签时触发所绑定的 CSS 类

导航链接：
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

通用匹配：
{ path: '**', component: PageNotFoundComponent }  

返回：
<button (click)="goBack()">go back</button>
goBack(): void {
  this.location.back();
}

路由获取参数：
方法一、
?retailer_id=1325&location_id=2652737&store_location_id=446702&company_name=Super Pho&flag=1

 this.route.queryParams.subscribe(queryParams => {
        let productId = queryParams.productId;
        let title = queryParams.title;
    });

　　this.activatedRoute.params

.subscribe(params => {

this.retailerId = +params['id']

});



方法二、
  public params;  //公有变量
  ngOnInit() {
    this.getData();
  }
  getData() {
     this.route.params.subscribe(
       params => {
          this.params = params;
          console.log(this.params);
       }
    );
  }

方法三、
ngOnInit(): void {
  this.getData();
}

getData(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  console.log(id);
}


惰性加载路由配置：loadChildren 
{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},

{ path: 'account', loadChildren: './pages/backend/retailer/account.module#AccountModule', data: { breadcrumb: 'Account Settings' }},
给它一个 loadChildren 属性（替换掉 children 属性）。 loadChildren 属性接收一个函数，该函数使用浏览器内置的动态导入语法 import('...') 来惰性加载代码，并返回一个承诺（Promise）。 其路径是 AdminModule 的位置（相对于应用的根目录）。 当代码请求并加载完毕后，这个 Promise 就会解析成一个包含 NgModule 的对象，也就是 AdminModule。

导出

export default 是默认导出
export const 是命名导出

export const可以有多个，但是export default只有且仅有一个

ActivatedRoute

参数：
url     :一个路由路径的 Observable，是一个由路由路径的各个部分组成的字符串数组。
data     :包含提供给当前路由的 data 对象的 Observable。 也包含任何由解析守卫解析 出的值。
paramMap     :一个包含该路由的必要参数和可选参数 map 的 Observable。 这个 map 支持从同一个参数中获得单个或多个值。
queryParamMap     :一个包含适用于所有路由的查询参数 map 的 Observable。 这个 map :支持从同一个查询参数中获得单个或多个值。
fragment     :一个适用于所有路由的 URL 片段的 Observable。
outlet     :用来渲染该路由的 RouterOutlet 的名字。 对于无名出口，这个出口的名字是 primary。
routeConfig     :包含原始路径的那个路由的配置信息。
parent     ：当该路由是子路由时，表示该路由的父级 ActivatedRoute。
firstChild     ：包含该路由的子路由列表中的第一个 ActivatedRoute。
children     ：包含当前路由下所有激活的子路由。

还有两个较旧的属性，但更推荐使用它们的替代品，因为它们可能会在以后的 Angular 版本中弃用。

    params ：一个 Observable，它包含专属于该路由的必要参数和可选参数。请改用 paramMap。

    queryParams：一个包含可用于所有路由的查询参数的 Observable。请改用 queryParamMap。

路由器术语

Router     ：为活动 URL 显示应用中的组件。 管理从一个组件到另一个的导航。
RouterModule     ：一个单独的 NgModule，它提供了一些必要的服务提供者和一些用于在应用视图间导航的指令。
Routes     ：定义一个路由数组，每一个条目都会把一个 URL 路径映射到组件。
Route     ：定义路由器如何基于一个 URL 模式导航到某个组件。 大部分路由都由一个路径和一个组件类组成。
RouterOutlet     ：该指令 (<router-outlet>) 用于指出路由器应该把视图显示在哪里。
RouterLink     ：用于将可点击的 HTML 元素绑定到某个路由的指令。单击带有 routerLink 指令且绑定到字符串或链接参数数组的元素，将触发导航。
RouterLinkActive     ：该指令会在元素上或元素内包含的相关 routerLink 处于活动/非活动状态时，从 HTML 元素上添加/移除类。
ActivatedRoute     ：一个提供给每个路由组件的服务，其中包含当前路由专属的信息，例如路由参数、静态数据、解析数据、全局查询参数和全局片段。
RouterState     ：路由器的当前状态，包括一棵当前激活路由的树以及遍历这棵路由树的便捷方法。

链接参数数组：一个由路由器将其解释为路由指南的数组。你可以将该数组绑定到 RouterLink 或将该数组作为参数传递给 Router.navigate 方法。

路由组件：一个带有 RouterOutlet 的 Angular 组件，可基于路由器的导航来显示视图。

关于[]

在别的语言中一般获取层级的值，会利用. 但是在angular中如果这个值不存在则会报错，所以在angular中，一般使用[]

比如：
在vue中：
this.$http.get(url).then(data=>{
        res=data.result.name;
})

而在angular中：
this.httpClient.post().subscribe(data=>{
   res=data['result']['name']         
})

angular 插件名：ngx-spinner
一组用于Angular 4/5/6/7/8/9 +的50多个动画加载微调器，旨在告知用户操作正在进行中。 loading forexample
NgxSpinnerService在您想使用的任何地方添加服务ngx-spinner。

安装
# Yarn
$ yarn add ngx-spinner

# NPM
$ npm install ngx-spinner --save

导入NgxSpinnerModule根模块（AppModule）： 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// 导入库模块

import { NgxSpinnerModule } from "ngx-spinner";
@NgModule({
  imports: [
    NgxSpinnerModule

  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

　　NgxSpinnerService在您想使用的任何地方添加服务ngx-spinner。

import { NgxSpinnerService } from "ngx-spinner";
class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}
  ngOnInit() {
    this.spinner.show();

    setTimeout(() => {

      this.spinner.hide();

    }, 5000);

  }

}

　　现在在你的模板中使用

<ngx-spinner></ngx-spinner>

方法

    NgxSpinnerService.show() 显示微调器
    NgxSpinnerService.hide() 隐藏微调器

可用选项

    [bdColor]：RGBA颜色格式。要为背景设置背景颜色，默认为rgba(51,51,51,0.8)其中aplhavalue（0.8）为背景的不透明度
    [大小]：任何人都从small，default，medium，large。要设置微调框的大小，默认large
    [color]：任何CSS颜色格式。要设置微调框的颜色，默认#fff
    [type]：从Load Awesome中选择任何动画微调器。要设置微调器的类型，默认ball-scale-multiple
    [fullScreen]：true或false 要启用/禁用全屏模式（覆盖），默认true
    [name]：对于多个微调器要设置微调器的名称，默认primary
    [zIndex]：对于动态z-index设置微调器的z-index，默认99999
    [template]：用于自定义微调器图像要为自定义微调器设置自定义模板，默认null

Angular 9支持
自定义微调框图像支持（gif），您可以传递img标签
多个微调器
通过服务可配置的选项
全屏模式（启用/禁用）
show()/hide() 方法返回承诺
动态 z-index
hide/show旋转器时平滑动画
新更新的DEMO网站

angular2-color-picker, Angular 2颜色选择器参考

安装
npm i --save angular2-color-picker

用法
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>

或者
<input [colorPicker]="color" (colorPickerChange)="color=$event" [style.background]="color" [value]="color"/>

在你的app.module.ts 中添加 ColorPickerModule:

import {ColorPickerModule} from 'angular2-color-picker';
@NgModule({
 imports: [ColorPickerModule]
})

ngx-pagination：分页 demo

安装：
npm install ngx-pagination --save

导入：
// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';
 
@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

页面使用：
// my.component.ts
import {Component} from '@angular/core';
 
@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>
               
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}


html使用：
<some-element *ngFor="let item of collection | paginate: { id: 'foo',
                                                      itemsPerPage: pageSize,
                                                      currentPage: p,
                                                      totalItems: total }">...</some-element>

在angular中使用bootstrap的modal模态框，如何手动调用modal的显示与否：

官方文档上面介绍的使用方法如下：

$('#myModal').modal();

但是在angular中会报错：类型“JQuery<HTMLElement>”上不存在属性“modal”。

解决方法：

(<any>$('#myModal')).modal('show');
  在form外面的button如何触发form的提交事件：

this.enrollmentForm.markAllAsTouched();

posted @ 2020-09-01 14:59 jahoon 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

jahoon

杂-笔记

公告