Angular 在ionic中的组件和页面之间共享数据

您好，我正在学习离子，我想进入主页访问组件文件，当我在主页中提到组件类链接时，只有第一页显示剩余页面未进入页面

如何解决这个问题，或者告诉我其他解决这个问题的方法

---

组件模块

appmodule.ts

app.html

离子空白
形象
视频
音频

我知道有两种方法可以实现通过组件传递数据

1） 使用服务（我更喜欢这个）

data.service.ts

    import { Injectable } from '@angular/core';

    @Injectable()
    export class dataService {
        data: string;

        setData(data) {
            this.data = data;
        }

        getData(){
           return this.data;
        }
    }

app.component.ts

import { Component } from '@angular/core';
import { dataService } from './server.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private dataService: dataService){}

  getData() {
      retrun this.dataService.getData();
  }

}

2） 使用导航控制器

 //When you are using the push to switch pages you pass the data to the otherpage
    this.navCtrl.push(HomePage, {
          data: user
    });

在您刚刚访问的页面中（在本示例主页中），您可以访问以下数据：

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = navParams.get('data');
  }

---

您可以使用NavController传递数据，以下是教程：我的代码位于components类中，因此我希望通过页面访问这些组件文件。我知道在页面之间共享数据，但这一点让我很困扰，您到底想访问哪些组件文件？变量？你是在谈论.ts文件还是.html文件？谢谢你在组件html页面中的回复，我在div标签中提到了按钮，问题解决了。@johnny很高兴你修复了它。顺便说一句，您从未将component.html页面代码放入问题中

import { Component } from '@angular/core';
import { dataService } from './server.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private dataService: dataService){}

  getData() {
      retrun this.dataService.getData();
  }

}

 //When you are using the push to switch pages you pass the data to the otherpage
    this.navCtrl.push(HomePage, {
          data: user
    });

constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = navParams.get('data');
  }