Пользовательский компонент со свойством

Question

Я хочу знать, как в Ionic 3 возможно создать наш собственный компонент с некоторым свойством. Примером является «полное» свойство кнопки-иона. То, что я хочу сделать, это сделать свой собственный компонент, который будет выглядеть так

<my-component my-property></my-component>

Answer 1

Я очень рекомендую вам любой базовый учебник с сайта angular.io.

То, что вы хотите, является основой Angular, которую использует Ionic.

Смотрите здесь, я создаю простой пример для вас: https://stackblitz.com/edit/ionic-f9bq9h

Вы определяете свой компонент в файле ts:

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

@Component({
  selector: 'my-component',
  template: `<div>{{ myProperty }}</div>`
})
export class MyComponent {

  @Input('myProperty') myProperty: string;

  constructor() {

  }

}

Убедитесь, что он правильно добавлен в app.module.ts

Затем вы можете использовать его в других компонентах, куда вы его импортируете:

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <my-component [myProperty]="'I am a custom component'"></my-component>
</ion-content>