标签：index 渲染 any 监听 crumbData import 面包屑 angular

背景

为了做一个面包屑的样式

思路

三个界面：
根页面: index（展示面包屑）
资金页面: fund(展示收入、支出，属于同一个页面)

步骤：
在index服务中存BehaviorSubject类型的变量crumbData，
在found组件中监听路由变化，根据路由参数设置不同的面包屑数据，
在index组件中订阅crumbData变量

出现的问题：
如果不用BehaviorSubject订阅，直接设为一个列表，在更新时，会报错:数据已经检查后被修改
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

源码

src\app\pages\index\index.component.html

	<li nz-menu-item (click)="navigate('/found', 0)">村收入</li>
    <li nz-menu-item (click)="navigate('/found', 1)">村支出</li>
    
    <nz-breadcrumb>
      <ng-container *ngFor="let item of crumbData">
        <nz-breadcrumb-item >{{item}}</nz-breadcrumb-item>
      </ng-container>
    </nz-breadcrumb>
    
	<router-outlet></router-outlet>

src\app\pages\index\index.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
declare const document: any;
import { IndexService } from './index.service';

@Component({
  selector: 'k-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent{

  constructor(
    private route: Router,
    public indexService: IndexService,
    ) { 
      this.indexService.crumbData.subscribe((x) => {
        this.crumbData = x
    });
    }
    
  // 面包屑数据
  public crumbData: any = ['首页']

  navigate(url: any, type?: any) {
    this.route.navigate([url], { queryParams: { type: type } })
  }
}

src\app\pages\index\index.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class IndexService {

  // 面包屑数据
  public crumbData = new BehaviorSubject<any>(['首页']);

  setData(data: any) {
    this.crumbData.next(data);
  }
}

参考

vue、angular中的数据监听

标签：index,渲染,any,监听,crumbData,import,面包屑,angular
来源： https://blog.csdn.net/qq_41243979/article/details/121959879

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。