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

这篇具有很好参考价值的文章主要介绍了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,导出去,angular中如何定义一个全局组件?,angular,angular.js,前端,javascript

 ,第二步:在其他页面引入该组件:比如我们在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

angular中如何定义一个全局组件?,angular,angular.js,前端,javascript

第四步:我们只需要在对应的页面中引入导航数组即可:文章来源地址https://www.toymoban.com/news/detail-659195.html

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:FormGroup
  
  breadcrumbList: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)
    })
  }
 

 
}

到了这里,关于angular中如何定义一个全局组件?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack如何把dist.js中某个模块js打包成一个全局变量,使得在html引入dist.js后可以直接访问

    webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码: 1、安装expose-loader npm install expose-loader --save-dev 2、webpack.config.js配置文件 值得注意的是:我在本地使用16.14.2版本的node打包时会报一些警告,升级node18.12.1未报警告,警告

    2024年01月24日
    浏览(43)
  • inject: [‘reload‘] 是一个在 Vue.js 组件中常见的语法,用于将父组件中定义的 reload 方法注入到子组件中。

    详细解释如下: inject : 这是 Vue.js 提供的一个选项,允许子组件从父组件中注入数据、方法等。 [\\\'reload\\\'] : 这表示子组件想要从父组件中注入名为  reload  的方法或数据。 在给定的代码片段中, reload  方法被注入到了子组件中,使得子组件可以直接调用这个方法。这通常用于

    2024年01月19日
    浏览(40)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(54)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(47)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • JavaScript保留字和预定义的全局变量及函数汇总

    保留字也称,每种语言中都有该语言本身规定的一些,这些都是该语言的语法实现基础,JavaScript中规定了一些标识符作为现行版本的或者将来版本中可能会用到的,所以当我们定义标识符时就不能使用这些了,下面介绍下JavaScript保留

    2024年01月16日
    浏览(58)
  • uniapp自定义动态tabbar及全局挂载底部自定义组件

    本篇文章解决的问题如下: 1:uniapp在pages.json中定义的tabbar,在非tabbar页面的时候不会显示,所以自定义了一个tabbar组件。(注意是自定义组件不是官方的custom-tab-bar组件) 2:有些tabbar需要动态变化,会员登陆前和会员登陆后可能会需要在tabbar上面展示不同的项目,所以要做

    2024年02月02日
    浏览(60)
  • Vue定义全局组件的三种方式

    第一种方式 1.1使用 Vue.extend 来创建全局的Vue组件 1.2使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象) Vue.component 第一个参数:组件的名称,引用组件的时候,就是一个HTML 标签形式来引入的 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容 1

    2024年02月07日
    浏览(47)
  • Vue2封装自定义全局Loading组件

    前言 在开发的过程中,点击提交按钮,或者是一些其它场景总会遇到Loading加载框,PC的一些UI库也没有这样的加载框,无法满足业务需求,因此可以自己自定义一个,实现过程如下。 效果图 如何封装? 第1步:创建要封装成全局组件的文件 第2步:注册组件 Loading这类的通用

    2024年02月15日
    浏览(37)
  • Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    环境: Angular 13.x.x angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默认打包进 main.js , 而是用户点按钮后动态

    2024年01月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包