# @bagaar/ember-breadcrumbs 中文文档

规范地址：https://npmcn.com/package/%40bagaar/ember-breadcrumbs/

版本：6\.0\.0
npm 元数据更新时间：2026-08-20T12:49:11.454Z
中文译文更新时间：2026-11-07T16:18:20.771Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bagaar/ember-breadcrumbs
原文对照：https://npmcn.com/package/%40bagaar/ember-breadcrumbs/?lang=original
源码仓库：https://github.com/bagaar/ember-breadcrumbs

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：33.1 kB，42 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：ember-modifier \>= 4\.0\.0
- 首次发布：2018-10-20T20:35:07.771Z
- 最新版本发布：2026-08-20T12:49:11.263Z
- 近 30 天下载量：5067（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 1 个）

## 中文简介

Ember应用程序基于模板的面包crumb管理.

## 安装

```sh
npm install @bagaar/ember-breadcrumbs
```

也可以使用：`pnpm add @bagaar/ember-breadcrumbs`、`yarn add @bagaar/ember-breadcrumbs`、`bun add @bagaar/ember-breadcrumbs`

## README

# @bagaar/ember-breadcrumbs (英语)

[![CI](https://github.com/bagaar/ember-breadcrumbs/workflows/CI/badge.svg)](https://github.com/bagaar/ember-breadcrumbs/actions?query=workflow%3ACI) [![NPM Version](https://badge.fury.io/js/%40bagaar%2Fember-breadcrumbs.svg)](https://badge.fury.io/js/%40bagaar%2Fember-breadcrumbs)

Ember应用程序基于模板的面包crumb管理.

## 兼容性

-   Ember.js v5.8或以上 (中文(简体) )
-   嵌入或嵌入自动导入 v2

## 安装

```shell
npm install -D @bagaar/ember-breadcrumbs
```

```shell
pnpm add -D @bagaar/ember-breadcrumbs
```

```shell
yarn add -D @bagaar/ember-breadcrumbs
```

## 使用量

### 登记 `breadcrumbs` 服务

经典应用不需要做任何事情: `breadcrumbs` 服务被再出口到 自动应用树.

使用严格解析器的应用程序必须自己注册服务,因为没有 app-tree再出口 解决他们:

```js
// app/app.js

import BreadcrumbsService from '@bagaar/ember-breadcrumbs/services/breadcrumbs';

export default class App extends Application {
  modules = {
    './services/breadcrumbs': BreadcrumbsService,
    // ...
  };
}
```

见 [`demo-app/app.gts`](https://npmcn.com/package/%40bagaar/ember-breadcrumbs/demo-app/app.gts) 以实例为例.

### 严格模式示例( GJS)

如果您使用严格的模式模板,请导入组件,并在模板块中直接使用。 同样的模式适用于GTS文件.

```gjs
// app/components/breadcrumbs-demo.gjs

import Component from '@glimmer/component';
import { LinkTo } from '@ember/routing';
import { BreadcrumbsContainer, BreadcrumbsItem } from '@bagaar/ember-breadcrumbs/components';

export default class BreadcrumbsDemo extends Component {
  <template>
    <BreadcrumbsContainer
      @itemClass="breadcrumbs__item"
      @linkClass="breadcrumbs__link"
      class="breadcrumbs"
    />

    <BreadcrumbsItem as |linkClass|>
      <LinkTo @route="foo" class={{linkClass}}>
        Foo
      </LinkTo>
    </BreadcrumbsItem>

    <BreadcrumbsItem as |linkClass|>
      <LinkTo @route="foo.bar" class={{linkClass}}>
        Bar
      </LinkTo>
    </BreadcrumbsItem>
  </template>
}
```

### 1\. 界定您想要将面包屑放入何处

```handlebars
{{! app/templates/application.hbs }}

<BreadcrumbsContainer
  @itemClass="breadcrumbs__item"
  @linkClass="breadcrumbs__link"
  class="breadcrumbs"
/>
```

> **注:** 也可以制造出多个实例 `<BreadcrumbsContainer />` 组件.

### 2\. 离开面包屑后

```handlebars
{{! app/templates/foo.hbs }}

<BreadcrumbsItem as |linkClass|>
  <LinkTo @route="foo" class={{linkClass}}>
    Foo
  </LinkTo>
</BreadcrumbsItem>
```

```handlebars
{{! app/templates/foo/bar.hbs }}

<BreadcrumbsItem as |linkClass|>
  <LinkTo @route="foo.bar" class={{linkClass}}>
    Bar
  </LinkTo>
</BreadcrumbsItem>
```

> **注:** 这个 `<BreadcrumbsItem />` 构成部分负责提供 `<LinkTo />` 包含到所有实例中 `<BreadcrumbsContainer />` 使用 Ember 组件 `{{in-element}}` 帮手.

#### 优点

留下这样的面包屑 可能看起来非常动词, 但实际上相当灵活 并有一些优点:

1.  因为你把面包屑留在模板里 添加剂不必考虑Aync模型钩
2.  因为你用Ember的 `<LinkTo />` 用于定义面包屑链接的组件,您可以完全控制:
    -   **如何定义它们** (内行对块
    -   **他们应该如何工作** (路由,动态段,查询参数,
    -   **他们应该是什么样子** (文字,图标,额外的CSS类名称,

#### 渲染输出

产出如下:

```html
<ul class="breadcrumbs">
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/foo">Foo</a>
  </li>
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/foo/bar">Bar</a>
  </li>
</ul>
```

### 3\. 面包屑的造型

外加剂没有默认型号的发货,这应该在消耗项目内进行.

### 4.四. `<BreadcrumbsContainer />` 参数

| 名称 | 说明 | 类型 |
| :-- | :-- | :-- |
| **项目分类** | 将添加到全部的类 `<BreadcrumbsItem />` 组件 | 字符串 |
| **链接分类** | 接下来的班级是 `<BreadcrumbsItem />`块内容 | 字符串 |

## 引擎内用法

### 1\. 添加 `@bagaar/ember-breadcrumbs` 到你的发动机 `dependencies`

这样就够了 `@bagaar/ember-breadcrumbs` 引擎内可用的组件.

```json
{
  "dependencies": {
    "@bagaar/ember-breadcrumbs": "*"
  }
}
```

### 2\. 制定 `breadcrumbs` 引擎内可用的服务

这将确保同一实例表明 `breadcrumbs` 服务在引擎内部和主机应用程序内部使用.

```javascript
// app/app.js

export default class App extends Application {
  engines = {
    'engine-name': {
      dependencies: {
        services: ['breadcrumbs'],
      },
    },
  };
}
```

```javascript
// lib/engine-name/addon/engine.js

export default class EngineName extends Engine {
  dependencies = {
    services: ['breadcrumbs'],
  };
}
```

**就这样! 现在你应该可以把面包屑留在引擎内部, 并将其制成主机应用程序内部.**

## 捐款

见 [捐款](https://npmcn.com/package/%40bagaar/ember-breadcrumbs/CONTRIBUTING.md) 详细指南.

## 许可证

本项目根据以下规定获得许可证: [MIT 许可证](https://npmcn.com/package/%40bagaar/ember-breadcrumbs/LICENSE.md)。 。 。 .

## 常见问题

### @bagaar/ember-breadcrumbs 是什么？

Ember应用程序基于模板的面包crumb管理\.

### 如何安装 @bagaar/ember-breadcrumbs？

在项目目录运行 npm install @bagaar/ember-breadcrumbs，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：ember-modifier（\>= 4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bagaar/ember-breadcrumbs 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bagaar/ember-breadcrumbs 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bagaar/ember-breadcrumbs 可以商用吗？

@bagaar/ember-breadcrumbs 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bagaar/ember-breadcrumbs 的下载量有多少？

根据 npm 官方下载统计，@bagaar/ember-breadcrumbs 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,067 次，日均约 169 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bagaar/ember-breadcrumbs 还在维护吗？

最新版本 6\.0\.0 发布于 2026/08/20（2 个月前）；至今共发布 15 个版本，其中过去 12 个月发布了 1 个；首次发布于 2018/10/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。