广州市天河区门户网站,徐州经济开发区网站,株洲网络营销推广哪家好,网站开发新闻管理系统的背景需求#xff0c;我们需要新建一个navBreadcrumb的全局组件。这是一个面包屑导航#xff0c;在不同的页面引入时传入一个路由数组即可。
第一步#xff1a;我们新建这个组件#xff1a;
ng g c navBreadcrumb ng g m navBreadcrumb----------nav-breadcrumb.module-------…需求我们需要新建一个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-itema routerLink/storelist/storelist店铺列表/a/nz-breadcrumb-itemnz-breadcrumb-item 创建店铺/nz-breadcrumb-item --nz-breadcrumb-item *ngForlet item of routeList ng-container *ngIfitem.isClick;else lastBreadCrumba [routerLink][item.path]{{item.name}}/a/ng-containerng-template #lastBreadCrumb{{item.name}}/ng-template /nz-breadcrumb-item
/nz-breadcrumb
这里有几个要注意的点
1 ---nav-breadcrumb.module----------这个文件时一定要的。angular和vue/react不同modulecomponent对于任何页面而言要引入其他组件只需要引入该模块就可以了。
所以我们新建这个文件。先在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.moduleNgModule({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 *ngForlet item of routeList ng-container *ngIfitem.isClick;else lastBreadCrumba [routerLink][item.path]{{item.name}}/a/ng-containerng-template #lastBreadCrumb{{item.name}}/ng-template /nz-breadcrumb-item
到这里会报一个错‘Cant bind to routerLink since it isnt 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)})}}
