Ionic 4 将属性传递给自定义组件答案

【问题标题】：Ionic 4 pass property to custom componentIonic 4 将属性传递给自定义组件
【发布时间】：2019-12-17 17:33:52
【问题描述】：

我编写了一个自定义组件来处理我的 ion-header，因为每页我需要更改的只是标题。但是，标题没有显示，因为组件似乎没有从应用页面获取属性。

组件模板

<ion-header>
 <ion-toolbar color="primary">
  <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
  </ion-buttons>
<ion-title> {{title}} </ion-title>

组件打字稿

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-custom-toolbar',
  templateUrl: './custom-toolbar.component.html',
  styleUrls: ['./custom-toolbar.component.scss'],
})
export class CustomToolbarComponent implements OnInit {

  @Input() title: any;

  constructor() { }

 ngOnInit() {
  }
}

应用页面模板

<app-custom-toolbar [title]="Dashboard"></app-custom-toolbar>

【问题讨论】：

我认为如果你有 [] 在它周围然后传递一个字符串你需要"'dashboard'" （所以" 里面有一个'）。
@rtpHarry 解决了它我知道这很简单。您可以将其发布为答案，以便我可以将其作为答案吗？谢谢
:) 我已将其添加为答案...我很感激这个提议

标签： ionic-framework ionic4 angular8

【解决方案1】：

您需要在自定义组件中声明 @Input() title 以将值从父组件传递给它 -

子组件

...

...

@Input() title: any;

...

...

父组件 HTML -

<child-component [title]="somePropertyInParentComponent"></child-component>

编辑：根据您更新的问题。尝试从父组件的 title 属性中删除 []

【讨论】：

我试过了，但它不起作用。我已经用包含的代码更新了原始问题谢谢
您是否尝试过检查 DOM 以查看 ion-title 中是否存在该值？它会清除是否存在渲染问题。

【解决方案2】：

正如 Pawan Sharma 所说，您需要声明一个 @Input，在此链接中，您可以找到有关它的更多信息。 https://victorroblesweb.es/2016/11/07/input-output-angular-2/

打字稿

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

@Component({
  selector: 'app-footertoolbar',
  templateUrl: './footertoolbar.page.html',
})
export class FooterToolbarPage implements OnInit {

  @Input() public activeIndex:number;

  constructor(private navCtrl: NavController) { }
  ngOnInit() {}

  public GoToPage() { console.log(this.activeIndex); }  
}

HTML

<ion-toolbar color="dark">
    <ion-buttons class="sidemargin" slot="secondary">                      
       <ion-button (click)="GoToPage()"></ion-button>               
    </ion-buttons>
</ion-toolbar>

使用该组件的组件的 HTML

<app-footertoolbar [activeIndex]="0" >
</app-footertoolbar>

【讨论】：

【解决方案3】：

按要求重新发布我的评论：

我认为，如果你有 [] 围绕它，那么要传递一个字符串，你将需要 "'dashboard'" （所以 " 里面有一个 '）。

【讨论】：