bixi/packages/core/layout/demo/set-page.md

企业级中后台前端解决方案

---
title:
  zh-CN: 使用服务
  en-US: Use Service
order: 11
---

默认面包屑/页面标题。

```ts
import { Component } from '@angular/core';
import {BixiLayoutService, IMenu} from '@bixi/core/layout';

@Component({
  selector: 'app-demo',
  template: `
  <div class="main-wrap">
   <bixi-layout>
      <bixi-layout-header
        [logoSmall]="logoSmall"
        [logoLarge]="logoLarge"
      >
      </bixi-layout-header>
      <bixi-layout-menu [menus]="menus" [singleOpen]="true"></bixi-layout-menu>
      <bixi-layout-content>
        <section class="content">
           <button nz-button nzType="primary"(click)="onSetBreadscrumbs()">修改面包屑</button>
           <button nz-button nzType="primary"(click)="onSetTitle()">修改页面 title</button>
           <button nz-button nzType="primary"(click)="onSetLayout()">修改布局</button>
           <button nz-button nzType="primary"(click)="onSetMenu()">展开/收起 menu</button>
        </section>
      </bixi-layout-content>
    </bixi-layout>
  </div>`,
  styles: [
    `.content{
      padding: 20px;
      height:500px;
      background-color: #fff;
    }`
  ]
})
export class DemoComponent {
    logoSmall='./assets/img/layout-logo-large.svg';
    logoLarge='./assets/img/layout-logo-small.svg';
    count = 1;
    constructor(
      private layoutService: BixiLayoutService
    ) { 
    }

    onSetBreadscrumbs() {
      this.layoutService.setBreadcrumbs((breads) => {
        return breads.concat([
          {
            name: 'a',
            link: './a'
          }, {
            name: 'b',
            link: './b'
          }, {
            name: `${this.count++}`
          }
        ]);
      })
    }

    onSetTitle() {
      // 模拟 call api
      this.layoutService.setPageTitle(() => {
        return `bixi-${this.count++}`;
      })
    }

    onSetLayout() {
      this.layoutService.toggleHeader();
    }

    onSetMenu() {
      this.layoutService.toggleMenu();
    }

    menus: IMenu[] = [
      {
        title: 'Team Group',
        icon: 'user',
        open: true,
        selected: false,
        children: [
          {
            title: 'User 1',
            icon: 'user',
            open: false,
            link:'./',
            selected: false,
            matchRouterExact:true
          },
          {
            title: 'User 2',
            icon: 'user',
            open: false,
            link:'/',
            selected: false,
            matchRouterExact:true
          }
        ]
      }
    ];
}
```