Question

我在另一个页面中使用页面时遇到问题。首先，我创建了名为Header的第一个Page。我的页眉页得到了Selector：page-Header。将Page与此选择器一起使用时，效果很好。但是现在我在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

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

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() {
  }

}

此后，您必须从父组件传递值，以创建变量并分配标题文本，如：

public title = "My Title";

并使用此字符串变量名称传递您的值，以便您的UI代码为：

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

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

Ionic使用页面中的页面和设置属性

1 个答案: