mp-rxjs

最新推荐文章于 2019-08-29 17:09:18 发布

开水没有冬天

最新推荐文章于 2019-08-29 17:09:18 发布

阅读量202

点赞数

分类专栏： mp

本文链接：https://blog.csdn.net/weixin_42995876/article/details/99942654

版权

mp 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

rxjs-map+arr.map

改变list里面的key字段，eg：

let arr= [
  {deviceName:'deviceName111',deviceCode:'deviceCode111',deviceId:111},
  {deviceName:'deviceName222',deviceCode:'deviceCode222',deviceId:222},
  {deviceName:'deviceName333',deviceCode:'deviceCode333',deviceId:333},
];

let ob = of(arr);

ob.pipe(map(n=>n.map(v=>({
  name:v.deviceName,
  code:v.deviceCode,
  id:v.deviceId,
})))).subscribe(res=>{
  console.log(res);
})

结果：
没有冗余字段，全是自己想要的字段。

[
  {name: 'deviceName111', code: 'deviceCode111', id: 111},
  {name: 'deviceName222', code: 'deviceCode222', id: 222},
  {name: 'deviceName333', code: 'deviceCode333', id: 333},
]

example2：
数据：

public list = [
  {
    "groupId": 55,
    "categoryName": "分组一",
    "parentId": 0,
    "count": 0,
    "childs": [
      {"groupId": 56, "categoryName": "小组1-2", "parentId": 55, "count": 0, "childs": null},
      {"groupId": 61, "categoryName": "小组1-2", "parentId": 55, "count": 0, "childs": null},
    ]
  },
  {
    "groupId": 65,
    "categoryName": "分组二",
    "parentId": 0,
    "count": 1,
    "childs": [
      {"groupId": 72, "categoryName": "小组2-1", "parentId": 65, "count": 0, "childs": null},
      {"groupId": 73, "categoryName": "小组2-2", "parentId": 65, "count": 1, "childs": null},
      {"groupId": 109, "categoryName": "小组2-3", "parentId": 65, "count": 0, "childs": null}
    ]
  },
  {
    "groupId": 66,
    "categoryName": "分组三",
    "parentId": 0,
    "count": 4,
    "childs": [
      {"groupId": 74, "categoryName": "小组3-1", "parentId": 66, "count": 1, "childs": null},
      {"groupId": 75, "categoryName": "小组3-2", "parentId": 66, "count": 0, "childs": null},
    ]
  }
]

处理：




let ob = of(this.list);
ob
  .pipe(
    map(item => item.map(v => ({
      id: v.groupId,
      name: v.categoryName,
      count: v.count,
      fold: false,
      subTree: v.childs ? v.childs.map(val => ({
        id: val.groupId,
        name: val.categoryName,
        count: val.count,
        checked: false,
      })) : []
    })))
  )
  .subscribe(res => {
    console.log("ob-res:", res);
    console.log("ob-res:", JSON.stringify(res));
  })

结果：

[{
  "id": 55,
  "name": "分组一",
  "count": 0,
  "fold": false,
  "subTree": [
    {"id": 56, "name": "小组1-2", "count": 0, "checked": false},
    {"id": 61, "name": "小组1-2", "count": 0, "checked": false}
  ]
},
  {
    "id": 65,
    "name": "分组二",
    "count": 1,
    "fold": false,
    "subTree": [
      {"id": 72, "name": "小组2-1", "count": 0, "checked": false},
      {"id": 73, "name": "小组2-2", "count": 1, "checked": false},
      {"id": 109, "name": "小组2-3", "count": 0, "checked": false}
    ]
  },
  {
    "id": 66,
    "name": "分组三",
    "count": 4,
    "fold": false,
    "subTree": [
      {"id": 74, "name": "小组3-1", "count": 1, "checked": false},
      {"id": 75, "name": "小组3-2", "count": 0, "checked": false}
    ]
  }
]

处理-加上第二层处理：

let ob = of(this.list);
ob
  .pipe(
    map(item => item.map(v => ({
      id: v.groupId,
      name: v.categoryName,
      count: v.count,
      fold: false,
      subTree: v.childs ? v.childs.map(val => ({
        id: val.groupId,
        name: val.categoryName,
        count: val.count,
        checked: false,
      })) : []
    }))),
    map(item=>item.map(v=>({
      title:v.name,
      link:`/pages/detail/${v.id}`,
    })))
  )
  .subscribe(res => {
    console.log("ob-res:", res);
    console.log("ob-res:", JSON.stringify(res));
  })

结果：

[
  {"title": "分组一", "link": "/pages/detail/55"},
  {"title": "分组二", "link": "/pages/detail/65"},
  {"title": "分组三", "link": "/pages/detail/66"}
]

处理-筛选名字：

let ob = of(this.list);
ob
  .pipe(
    map(item => item.map(v => ({
      id: v.groupId,
      name: v.categoryName,
      count: v.count,
      fold: false,
      subTree: v.childs ? v.childs.map(val => ({
        id: val.groupId,
        name: val.categoryName,
        count: val.count,
        checked: false,
      })) : []
    }))),
    concatMap(res=>from(res)),
    filter(res=>res.id===this.currentId),
    pluck('name')
  )
  .subscribe(res => {
    console.log("ob-res:", res);
    console.log("ob-res:", JSON.stringify(res));
  })

结果：

分组二

rxjs-BehaviorSubject

private firstClass$ = new BehaviorSubject([]);


console.log("behaviorSubject:",this.firstClass$); // BehaviorSubject 
console.log("observable:",this.firstClass$.asObservable()); // Observable

其中：
Observable 即：{_isScalar: false, source: BehaviorSubject}

private firstClass$ = new BehaviorSubject([]); // 初始值为空数组
lists: any;

ngOnInit() {
  console.log("1:",this.firstClass$);
  setTimeout(() => { // 定时器来模拟接口:
    let arr = [
      {deviceName: 'deviceName111', deviceCode: 'deviceCode111', deviceId: 111},
      {deviceName: 'deviceName222', deviceCode: 'deviceCode222', deviceId: 222},
      {deviceName: 'deviceName333', deviceCode: 'deviceCode333', deviceId: 333},
    ];
    let ob = of(arr);
    ob.pipe()
      .subscribe(res => {
        this.firstClass$.next(res);
        console.log("3:",this.firstClass$);
      })
  }, 3000)
  console.log("2:",this.firstClass$);

  this.lists = this.firstClass$;
}

html:

<ul>
  <li *ngFor="let item of lists | async">{{item.deviceName}}</li>
</ul>

结果：执行顺序为1,2,3。
3s后，会渲染列表。async可以渲染BehaviorSubject 或者 Observable 。
如果不使用async，eg：

<ul>
  <li *ngFor="let item of lists">{{item.deviceName}}</li>
</ul>

private firstClass$ = new BehaviorSubject([]);
lists: any;

ngOnInit() {
  console.log("1:", this.firstClass$);
  setTimeout(() => {
    let arr = [
      {deviceName: 'deviceName111', deviceCode: 'deviceCode111', deviceId: 111},
      {deviceName: 'deviceName222', deviceCode: 'deviceCode222', deviceId: 222},
      {deviceName: 'deviceName333', deviceCode: 'deviceCode333', deviceId: 333},
    ];
    let ob = of(arr);
    ob.pipe()
      .subscribe(res => {
        this.firstClass$.next(res);
        console.log("3:",this.firstClass$);
      })
  }, 3000)
  
  console.log("2:", this.firstClass$);
  // console.log("behaviorSubject:", this.firstClass$);
  // console.log("observable:", this.firstClass$.asObservable());
  
   this.firstClass$
    // .asObservable()
    .subscribe(res => {
      console.log("asObservable", res);
      this.lists=res;
    });
}

this.firstClass$或者this.firstClass$.asObservable()是BehaviorSubject 或者 Observable，可以继续subscribe。
结果：先执行1和2，asObservable的res此时为空数组，过三秒后还会执行3的内容，此时asObservable更新为arr的数组内容。html渲染为列表。

example2-service共享数据：
service：

// get
firstClass(){
  return  this.firstClass$.asObservable(); // 更改后的树结构
}

private firstClass$= new BehaviorSubject<any[]>([]); // 修改结构后的树结构
private path = '/xxxxxxxx/api/product/';

// 获取树结构，并修改结构
getSource(){
  const url = this.path+'query-categoryTree';
  this.http.get(url)
    .pipe(
      map(res=>this.parseCategoryTree(res)) // 处理结构的函数
    )
    .subscribe(res=>{
      console.log("category-tree-service===query-categoryTree===res：",res);
      this.firstClass$.next(res); // 最新手
    })
}

使用：

navList$: Observable<any[]>;

loadNavList(){
  this.navList$= this.categoryTreeService.firstClass()   // 如果有get，那么不用调用函数
    .pipe(
      tap(res=>{
        console.log("tap-res:",res);
      }),
      map(nodes=>nodes.map(node=>({
        title:node.name,
        link: `/pages/product/list/${node.id}`
      })))
    )
}

监听路由参数：

currentUrl: string;
constructor(private router: Router) {
  this.currentUrl = this.router.routerState.snapshot.url;
}

此时，如果只是路由参数发生变化的时候，如何监听？？？？

ngOnInit() {
  console.log("list的内容：", this.list);
  console.log("rul-1:", this.currentUrl);
  this.router.events
    .pipe(filter((event:RouterEvent)=> event instanceof NavigationEnd))
    .subscribe(res => {
      console.log(res);
      this.currentUrl=res.url;
    })
}

this.router.events包括：

NavigationStart 
RoutesRecognized 
GuardsCheckStart 
ChildActivationStart 
ActivationStart 
GuardsCheckEnd 
ResolveStart 
ResolveEnd 
ActivationEnd 
ChildActivationEnd 
ActivationEnd 
ChildActivationEnd 
ActivationEnd
ChildActivationEnd 
Scroll 
NavigationEnd

完整的：

currentUrl: string; // 当前路由url，包含路由参数

constructor(private router: Router) {
  this.currentUrl = this.router.routerState.snapshot.url;
}

@Input() list: any; // input进来的list

subscription: Subscription; // 订阅的实例，最后要取消订阅

ngOnInit() {
  console.log("list的内容：", this.list);
  console.log("rul-1:", this.currentUrl);
  this.subscription = this.router.events
    .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd))
    .subscribe((event: RouterEvent) => {
      console.log(event);
      this.currentUrl = event.url;
    })
}

ngOnDestroy() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

tab页中有下拉选中（根据路由参数）

<ul class="mp-nav__list">
  <li class="mp-nav__item">
    <a href="javascript:;" class="mp-nav__link"
       routerLink='/pages/home' routerLinkActive='active'>
      首页
    </a>
  </li>
  
  <!--<li class="mp-nav__item" >
    <a href="javascript:;" class="mp-nav__link"
       routerLink='/pages/product/list/1'  routerLinkActive='active'>
      产品中心
    </a>
  </li>-->
  
  <nz-dropdown [nzTrigger]="'click'">
    <li class="mp-nav__item" nz-dropdown><!--routerLink='/pages/product/list/1'-->
      <a href="javascript:;" class="mp-nav__link"
         routerLinkActive='active' [ngClass]="{'active':currentUrl.includes('/pages/product')}">
        产品中心
      </a>
    </li>
    <ul nz-menu>
      <li nz-menu-item *ngFor="let item of list;index as i;"
          [nzSelected]='item.link==currentUrl'
          [routerLink]='item.link'>
        <a>{{item.title}}</a>
      </li>
    </ul>
  </nz-dropdown>
</ul>
div>

问题：

includes的使用。
active类通过routerLinkActive 和 ngClass同时判断。

默认某元素带有outline属性

:focus {
    outline:....; // user agent stylesheet
}

给当前元素加上outline:none;就可以了，可以覆盖掉的。

开水没有冬天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mp-rxjs

rxjs-map+arr.map改变list里面的key字段，eg：let arr= [ {deviceName:'deviceName111',deviceCode:'deviceCode111',deviceId:111}, {deviceName:'deviceName222',deviceCode:'deviceCode222',deviceId:222}, {device...
复制链接

扫一扫