angular中如何定义一个全局组件?

需求,我们需要新建一个navBreadcrumb的全局组件。这是一个面包屑导航,在不同的页面引入时传入一个路由数组即可。

第一步:我们新建这个组件:

ng g c navBreadcrumb ng g m navBreadcrumb----------nav-breadcrumb.module----------import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavBreadcrumbComponent} from "./nav-breadcrumb.component"
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { RouterModule } from '@angular/router';@NgModule({declarations: [NavBreadcrumbComponent],imports: [CommonModule,NzBreadCrumbModule,RouterModule],exports:[NavBreadcrumbComponent]
})
export class NavBreadcrumbModule { }---------nav-breadcrumb.component----------------import { Component, Input } from '@angular/core';
import {Breadcrumb} from "../../../interfaces/index"
import { Router, RouterLink } from '@angular/router'
@Component({selector: 'app-nav-breadcrumb',templateUrl: './nav-breadcrumb.component.html',styleUrls: ['./nav-breadcrumb.component.css']
})
export class NavBreadcrumbComponent {@Input() routeList: Breadcrumb[] =[]constructor(private router:Router){}}--------nav-breadcrumb.html----------------<nz-breadcrumb><!-- <nz-breadcrumb-item><a routerLink="/storelist/storelist">店铺列表</a></nz-breadcrumb-item><nz-breadcrumb-item >创建店铺</nz-breadcrumb-item>  --><nz-breadcrumb-item *ngFor="let item of routeList"> <ng-container *ngIf="item.isClick;else lastBreadCrumb"><a [routerLink]="[item.path]">{{item.name}}</a></ng-container><ng-template #lastBreadCrumb>{{item.name}}</ng-template>  </nz-breadcrumb-item> 
</nz-breadcrumb>

这里有几个要注意的点:

1 ---nav-breadcrumb.module----------这个文件时一定要的。angular和vue/react不同,module>component,对于任何页面而言,要引入其他组件,只需要引入该模块就可以了。

所以我们新建这个文件。先在declarations中申明组件,同时要exports,导出去,

 ,第二步:在其他页面引入该组件:比如我们在storegGenerate.ts文件中引入它,我们只需要导入nav-breadcrumb.module这个模块即可

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavBreadcrumbModule} from "../../components/nav-breadcrumb/nav-breadcrumb.module"@NgModule({imports: [CommonModule,NavBreadcrumbModule  //这里导入要引用组件的module],declarations: [StoreGenerateComponent,],
})
export class StoreGenerateModule {}

对于其他页面,同理:

第三步:我们要封装组件

还记得最开始的需求吗?我们这个全局组件是一个面包屑导航,我们用到的时候只需要传u一个路由数组就可以了。所以我们的组件逻辑应该如下:

import { Component, Input } from '@angular/core';
import {Breadcrumb} from "../../../interfaces/index"
import { Router, RouterLink } from '@angular/router'
@Component({selector: 'app-nav-breadcrumb',templateUrl: './nav-breadcrumb.component.html',styleUrls: ['./nav-breadcrumb.component.css']
})
export class NavBreadcrumbComponent {@Input() routeList: Breadcrumb[] =[]constructor(private router:Router){}}// 这里是Breadcrumb接口的类型//export interface Breadcrumb{
//    path?:string,
//    name?:string,
//    isClick?:boolean
//}

再回头看看我们这个组件的页面结构:

<nz-breadcrumb-item *ngFor="let item of routeList"> <ng-container *ngIf="item.isClick;else lastBreadCrumb"><a [routerLink]="[item.path]">{{item.name}}</a></ng-container><ng-template #lastBreadCrumb>{{item.name}}</ng-template>  </nz-breadcrumb-item> 

到这里会报一个错:‘Can't bind to 'routerLink' since it isn't a known property of 'a'.

那是因为我们这里做路由跳转,routerLink指令需要路由模块做支持,所以我们还需要引入routermModule

第四步:我们只需要在对应的页面中引入导航数组即可:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ApiService } from '../../api.service';
import {replaceStringsWithBooleans} from "../../../utils/utils"
import {Breadcrumb} from "../../../interfaces/index"
@Component({selector: 'app-store-generate',templateUrl: './store-generate.component.html',styleUrls: ['./store-generate.component.css']
})
export class StoreGenerateComponent implements OnInit{validateForm:FormGroupbreadcrumbList:Breadcrumb[]constructor(private fb:FormBuilder,private http:ApiService){this.breadcrumbList=[{path:'/storelist/storelist',name:"店铺列表",isClick:true},{path:'storeGenerate',name:"创建店铺",isClick:false},]}ngOnInit(){this.validateForm.get("isNeed")?.valueChanges.subscribe(value=>{console.log("value",value)})}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue中 .env .env.development .env.production 详细说明

1.配置文件有&#xff1a; .env 全局默认配置文件&#xff0c;不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则&#xff1a; 属性名必须以VUE_APP_开头&#xff0c;比如VUE_APP_XXX 3.关于文件的加载&#x…

【BASH】回顾与知识点梳理(三十一)

【BASH】回顾与知识点梳理 三十一 三十一. 进程的管理31.1 给进程发送讯号kill -signal PIDlinux系统后台常驻进程killall -signal 指令名称 31.2 关于进程的执行顺序Priority 与 Nice 值nice &#xff1a;新执行的指令即给予新的 nice 值renice &#xff1a;已存在进程的 nice…

uniapp的uview-plus组件库的导入

uniapp的vue3中使用uview-plus组件库。在插件市场中找到该组件并点击如下所示绿色按钮&#xff0c;弹出弹窗选择要导入的项目后&#xff0c;就会在uni_modules文件中生成如下文件内容 关于插件的下载区别&#xff0c;可参考&#xff1a;https://uniapp.dcloud.net.cn/compone…

信号

信号也是IPC中的一种&#xff0c;是和管道&#xff0c;消息队列&#xff0c;共享内存并列的概念。 本文参考&#xff1a; Linux中的信号_linux中信号_wolf鬼刀的博客-CSDN博客 Linux系统编程&#xff08;信号处理 sigacation函数和sigqueue函数 )_花落已飘的博客-CSDN博客 Linu…

常用curl参数及样例讲解

1 缘起 后端/后台项目开发过程中&#xff0c;有两个阶段的接口测试和验证&#xff0c;自测阶段&#xff0c;通过Postman构建请求&#xff0c; 自建一些参数&#xff0c;测试功能以及边界条件&#xff0c;这些都是可以自行掌控的&#xff0c;当完成功能验证与前端对接时&#x…

19万字智慧城市总体规划与设计方案WORD

导读&#xff1a;原文《19万字智慧城市总体规划与设计方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 感知基础设施 感知基础设施架构由感知范围、感知手…

正演的数值模拟(零基础,学习中)

摘要: 本贴从零开始学习正演的数值模拟方法. 1. 偏微分基础 引例: 物体从一维坐标的原点开始移动, 在 t t t 时刻, 它在坐标轴的位置由函数 s ( t ) s(t) s(t) 确定, 则速度为位置变化量与时间的比值: v ( t ) d s ( t ) d t lim ⁡ Δ t → 0 s ( t Δ t ) − s ( t )…

19-普通组件的注册使用

普通组件的注册使用-局部注册 一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件 import 组件对象 from.vue文件路径 import HmHeader from ./…

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器 在本文中&#xff0c;我们将创建一个实时网页编辑器。这是一个 Web 应用程序&#xff0c;允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用ifram…

如何找到一个数的所有质因数,以及如何快速判断一个数是不是质数

前情介绍 今天遇到一个需求&#xff1a;找到一个数所有的质因数。 初步解决 先定义一个判断质数的函数&#xff1a; def is_Prime(number):i 2count 0while i < number:if number % i 0 :count 1i 1if count > 0:return Falseelse:return True 接着定义一个寻找质…

【云原生】【k8s】Kubernetes+EFK构建日志分析安装部署

目录 EFK安装部署 一、环境准备&#xff08;所有主机&#xff09; 1、主机初始化配置 2、配置主机名并绑定hosts&#xff0c;不同主机名称不同 3、主机配置初始化 4、部署docker环境 二、部署kubernetes集群 1、组件介绍 2、配置阿里云yum源 3、安装kubelet kubeadm …

模型数据处理-数据放入 session和@ModelAttribute 实现 prepare 方法详细讲解

&#x1f600;前言 本文详细讲解了模型数据处理-数据放入 session和ModelAttribute 实现 prepare 方法详细讲解 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c…

企业数字化转型大数据湖一体化平台项目建设方案PPT

导读&#xff1a;原文《企业数字化转型大数据湖一体化平台项目建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 喜欢文章&#xff0c;您可以点赞评论转发…

知识体系总结(九)设计原则、设计模式、分布式、高性能、高可用

文章目录 架构设计为什么要进行技术框架的设计 六大设计原则一、单一职责原则二、开闭原则三、依赖倒置原则四、接口分离原则五、迪米特法则&#xff08;又称最小知道原则&#xff09;六、里氏替换原则案例诠释 常见设计模式构造型单例模式工厂模式简单工厂工厂方法 生成器模式…

设计模式篇---抽象工厂(包含优化)

文章目录 概念结构实例优化 概念 抽象工厂&#xff1a;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无须指定它们具体的类。 工厂方法是有一个类型的产品&#xff0c;也就是只有一个产品的抽象类或接口&#xff0c;而抽象工厂相对于工厂方法来说&#xff0c;是有…

Android Studio实现解析HTML获取图片URL,将URL存到list,进行列表展示

目录 效果build.gradle(app)添加的依赖(用不上的可以不加)AndroidManifest.xml错误代码activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL效果 build.gradle(app)添加的依赖(用不上的可以不加) dependencies {implementation com.square…

Python可视化在量化交易中的应用(11)_Seaborn折线图

举个栗子&#xff0c;用seaborn绘制折线图。 Seaborn中折线图的绘制方法 在seaborn中&#xff0c;我们一般使用sns作为seaborn模块的别名&#xff0c;因此&#xff0c;在下文中&#xff0c;均以sns指代seaborn模块。 seaborn中绘制折线图使用的是sns.lineplot()函数&#xff…

中国剩余定理及扩展

目录 中国剩余定理解释 中国剩余定理扩展——求解模数不互质情况下的线性方程组&#xff1a; 代码实现&#xff1a; 互质&#xff1a; 非互质&#xff1a; 中国剩余定理解释 在《孙子算经》中有这样一个问题&#xff1a;“今有物不知其数&#xff0c;三三数之剩二&#x…

【C++】做一个飞机空战小游戏(十)——子弹击落炮弹、炮弹与飞机相撞

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…

Mybatis的SqlSource SqlNode BoundSql

学习链接 MyBatis SqlSource解析 【Mybatis】Mybatis源码之SqlSource#getBoundSql获取预编译SQL Mybatis中SqlSource解析流程详解 Mybatis TypeHandler解析 图解 Mybatis的SqlSource&SqlNode - processon DynamicSqlSource public class DynamicSqlSource implement…