Требования: нам нужно создать новый глобальный компонент navBreadcrumb. Это навигационная цепочка: просто передайте массив маршрутов при вводе разных страниц.
Шаг 1: Давайте создадим этот компонент:
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, модуль>компонент. На любой странице, чтобы представить другие компоненты, вам нужно только представить модуль.
Итак, мы создаем этот новый файл. Сначала объявите компонент в объявлениях и одновременно экспортируйте его.
, Шаг 2. Добавьте компонент на другие страницы. Например, если мы представим его в файле 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 {
}
Для других страниц то же самое касается:
Шаг 3: Нам нужно инкапсулировать компонент
Вы все еще помните первоначальную потребность? Наш глобальный компонент представляет собой навигационную цепочку. Когда мы его используем, нам нужно только передать вам массив маршрутизации. Итак, логика нашего компонента должна быть следующей:
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> Здесь будет сообщено об ошибке: «Невозможно привязаться к «routerLink», поскольку это неизвестное свойство «a».
Это потому, что здесь мы делаем переходы по маршрутизации.Инструкция routerLink требует поддержки со стороны модуля маршрутизации, поэтому нам также необходимо ввести routermModule.
Шаг 4: Нам нужно только ввести массив навигации на соответствующую страницу:
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)
})
}
}