如何通过导入离子2 RC0版本中的特定组件在所有页面中创建通用自定义工具栏（任何其他元素）？

Question

我已将自定义工具栏附加为图片。我附上了我正在努力解决的代码。

import { Component } from '@angular/core';
import {IONIC_DIRECTIVES} from 'ionic/ionic';
@Component({
  selector: 'slime-toolbar',
  templateUrl: 'slime-toolbar.html',
  directives: [IONIC_DIRECTIVES]
})

但是上面的代码给出了错误，指令不能是组件的参数

Answer 1

我建议创建一个从ion-header派生的自定义组件。 虽然您没有在自定义工具栏中提及您想要的功能，但可以假设您要根据某些页面的逻辑更改添加的样式和项目。即。你想根据你所在的页面传递一个标题字符串，或者在右边添加一个图标等。

<强>定型

造型非常简单。如果您想在整个应用程序中使用样式作为组件，那么最佳解决方案是针对可以找到的离子2变量here。例如，如果您想更改背景颜色，只需编辑src - ＆gt; theme - ＆gt; variables.scss这样的文件

$toolbar-ios-background:(green);
$toolbar-md-background:(green);

可以轻松调整各种其他工具栏特定变量。 如果您想根据用户所在的页面更改样式，那么它将作为属性添加到<ion-header>作为输入进一步说明。

<强>组件

首先，我会使用cli快速生成组件

 $: ionic g component my-header

然后将该组件添加到app.module.ts作为声明。

import { MyHeaderComponent } from '../components/myheader/myheader';

@NgModule({
   declarations: [
     MyApp,
     Page1,
     Page2,
     MyHeaderComponent
],

然后，您可以将组件html更改为

<ion-header no-border>
  <ion-navbar>
    <button ion-button menuToggle>
     <ion-icon name="menu"></ion-icon>
   </button>
   <ion-title>{{text}}</ion-title>
 </ion-navbar>

将新创建的标题组件添加到通常具有<ion-header>完整html的位置，通常位于您希望显示的页面上<ion-content>标记之前的页面顶部。现在，这将显示您的自定义组件作为离子2标头元素。但是，当您将@Input()和@Output()添加到组件.ts时会发生主要自定义

自定义位

添加到您的组件.ts

import { Component,Input,Output,EventEmitter } from '@angular/core'; 

现在您可以使用输入

@Input('headerText') dynamicHeaderText;
text:string;

headerText是您添加到自定义组件的属性的名称

<my-header headerText="New title"></my-header>

New title是将传递到组件并分配给dynamicHeaderText的字符串

然后，您可以将dynamicHeaderText分配给text:string

ngAfterViewInit(){
    this.text = this.dynamicHeaderText;
}

现在，自定义组件标记中添加的字符串（New Title）（可以根据它所在的页面创建为自定义逻辑）将自定义组件逻辑传递给变量dynamicHeaderText。然后可以对其进行操作并将其分配给自定义组件html上添加的变量。

你可以做更多的事情，并建议进一步研究自定义组件，为代码片段添加动态逻辑。 请注意，如果添加动态值，则需要将属性更改为包含方括号。

<my-header [headerText]="dynamicLogicText"></my-header>

现在，您可以从离子2标头和基于您自己的自定义逻辑的可重用代码包获得所有好东西。这使得测试和可维护性变得更加容易。

希望这是有道理的。