How to define a global component in angular?

Requirements, we need to create a new global component of navBreadcrumb. This is a breadcrumb navigation, just pass in a route array when introducing different pages.

Step 1: Let’s create this component:

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>
 

Here are a few points to note:

1 ---nav-breadcrumb.module----------This file is required. Angular is different from vue/react, module>component. For any page, to introduce other components, you only need to introduce the module.

So we create this new file. First declare the component in declarations, and export it at the same time.

 , Step 2: Introduce the component into other pages: For example, if we introduce it in the storegGenerate.ts file, we only need to import the nav-breadcrumb.module 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 {
   

 }

For other pages, the same goes for:

Step 3: We need to encapsulate the component

Do you still remember the initial need? Our global component is a breadcrumb navigation. When we use it, we only need to pass u a routing array. So our component logic should be as follows:

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

Let’s look back at the page structure of our component:

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

An error will be reported here: 'Can't bind to 'routerLink' since it isn't a known property of 'a'.

That's because we are doing routing jumps here. The routerLink instruction requires support from the routing module, so we also need to introduce routermModule.

Step 4: We only need to introduce the navigation array into the corresponding page:

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

 
}