Ionic 在页面中使用页面并设置属性

Question

我有一个关于使用另一个页面的问题。首先，我创建了名为 Header 的第一个页面。我的 Header 页面获得了 Selector:page-Header。在另一个页面中使用带有此选择器的页面可以正常工作。但是现在我在 header.ts 中创建了一个名为 "Title" 的属性。标题是我也在 header.html 中使用的东西，只是为了显示文本。现在我想在第二页中再次使用 Header 并设置 "Title" 属性，但我不知道如何设置。仅在 HTML 中设置它不起作用。

第二个HTML:

<page-header Title="CrazyNewTitle"></page-header>

header.html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon color="dark" name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
    <ion-buttons end>
      <button ion-button end>
        <ion-icon color="dark" name="contact"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

header.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the HeaderPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-header',
  templateUrl: 'header.html',
})
export class HeaderPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

public Title : string;

  ionViewDidLoad() {
    console.log('ionViewDidLoad HeaderPage');
  }

}

感谢您的帮助:)

Answer 1

首先，您必须在 header 页面中创建 get 和 set 方法，您的 header 页面将如下所示：

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

@Component({
  selector: 'app-custom-header',
  templateUrl: './custom-header.component.html',
  styleUrls: ['./custom-header.component.css']
})
export class CustomHeaderComponent implements OnInit {
title : string;
  constructor() { }
@Input()
  set header(header_data: any) {
    this.title = header_data;
  }
  get header() {
    return this.title;
  }
  ngOnInit() {
  }

}

在此之后你必须从 parent 组件传递值来创建一个变量并分配你的 Header 文本，如：

public title = "My Title";

并使用此字符串变量名称传递您的值，这样您的 UI 代码将是：

<app-custom-header [header]="title"></app-custom-header>

使用此方法，您还可以传递 object、数组等。我为您的解决方案创建了 stackblitz。

Ionic 在页面中使用页面并设置属性

Ionic using Page in Page and Setting Attributes

html

angular

ionic4