需求，我們需要新建一個navBreadcrumb的全局組件。這是一個面包屑導(dǎo)航，在不同的頁面引入時傳入一個路由數(shù)組即可。

第一步：我們新建這個組件：

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 >
            創(chuàng)建店鋪
        </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，導(dǎo)出去，

?，第二步：在其他頁面引入該組件：比如我們在storegGenerate.ts文件中引入它，我們只需要導(dǎo)入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  //這里導(dǎo)入要引用組件的module
  ],
  declarations: [
    StoreGenerateComponent,
  ],
})
export class StoreGenerateModule {
   

 }

對于其他頁面，同理：

第三步：我們要封裝組件

還記得最開始的需求嗎？我們這個全局組件是一個面包屑導(dǎo)航，我們用到的時候只需要傳u一個路由數(shù)組就可以了。所以我們的組件邏輯應(yīng)該如下：

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
//}

再回頭看看我們這個組件的頁面結(jié)構(gòu)：

<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'.

那是因為我們這里做路由跳轉(zhuǎn)，routerLink指令需要路由模塊做支持，所以我們還需要引入routermModule

第四步：我們只需要在對應(yīng)的頁面中引入導(dǎo)航數(shù)組即可：文章來源地址http://www.zghlxwxcb.cn/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:"創(chuàng)建店鋪",isClick:false},
    ]

    
  }
  ngOnInit(){
    this.validateForm.get("isNeed")?.valueChanges.subscribe(value=>{
      console.log("value",value)
    })
  }
 

 
}

到了這里，關(guān)于angular中如何定義一個全局組件？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！