有没有办法在 Ionic 4 的全局组件上只设置一种模式？

Question

我只想查看我的 ion-button 组件，无论平台是什么。我知道我可以使用 mode 属性:

<ion-button mode="ios">My button</ion-button>

但是有没有办法为 ion-button 进行全局设置，这样我就不必每次都这样做了？

Answer 1

我认为没有现成的解决方案可以覆盖每个离子按钮的模式。但是有一个全局配置选项来设置整个应用程序的模式：https://ionicframework.com/docs/angular/config

您的解决方案可能是创建您自己的包含单个离子按钮元素的自定义 angular 组件。您需要根据您的需要和离子按钮组件输入设置输入和输出，但您绝对可以设置模式，而不是，您只需在应用程序的任何地方使用。

如果您唯一需要的是设置平台模式，这可能有点矫枉过正，但是如果您希望在整个应用程序中重复使用更多的自定义设置，则可以在 ts 文件中包含类似这样的内容：

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

@Component({
 selector: 'my-button',
 templateUrl: './my-button.component.html',
 styleUrls: ['./my-button.component.scss'],
})
export class YourButtonComponent implements OnInit {

 @Input() public label: string;
 /* you can also define defaults values here */
 @Input() public isDisabled: boolean = false;
 @Input() public icon: string;
 /* define more inputs if necessary: fill, expand, color.... */

 @Output() public buttonClicked = new EventEmitter();

 constructor() { }

 ngOnInit() {}

 buttonClick() {
    this.buttonClicked .emit(true);
 }

}

在您的 html 中，您将拥有：

<ion-button [disabled]="isDisabled" (click)="buttonClick()" mode="ios">
    <ion-icon slot="start" [name]="icon"></ion-icon>
    <ion-label>{{label}}</ion-label>
  </ion-button>

在您的页面模块中导入您的自定义组件后，您可以使用它：

<my-button [label]="'Add something'" [icon]="'add'" (buttonClicked)="doSomethingWhenClicked()"></my-button>

模式在组件本身上，您可以在应用程序的任何地方添加更多可重复使用的自定义。

有没有办法在 Ionic 4 的全局组件上只设置一种模式？

Is there a way to set only one mode on a component globally in Ionic 4?

ionic-framework

ionic4