如何将数据从父母传递给孩子以及如何将孩子传递给父母

Question

我是Angular的初学者，在我的DashBoard屏幕中，我具有一个带有多个选项卡的SideMenu。

当我选择相应的选项卡时，导航栏标题必须更改。

我发现了组件之间通信的3种方式

1）通过@Input共享数据
2）通过@ViewChild
共享数据 3）通过@Output()和EventEmitter

共享数据

  

我尝试了第二种方法来满足要求，但出现异常   TypeError：无法获取未定义或为null的属性“ title”   参考TypeError：无法获取未定义的属性“ title”或   空引用

有人可以帮我吗？

app.component.ts：

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Home.ts：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Nav) nav: Nav;
  // make UsersPage the root (or first) page
  rootPage: any = DashboardTabsPage;
  pages: Array<{ title: string, icon: string, component: any, openTab? : any }>;

  constructor() {
    // set our app's pages
    this.pages = [
      { title: 'DashBoard',icon: 'home', component: DashboardTabsPage},
      { title: 'List', icon: 'home',component: ListsTabsPage },
      { title: 'NoTabs', icon: 'home',component: NoTabsPage },
    ];
  }

  openPage(page) {
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component,{ openTab: page.openTab });
  }

}

dashboard.html：

<ion-header>

  <ion-navbar>
    <button menuToggle left>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<!-- <h1>Dashboard showing</h1> -->
<ion-tabs #myTabs>
    <ion-tab tabIcon="settings" tabTitle="Settings" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="person" tabTitle="Profile" [root]="tab2"></ion-tab>
</ion-tabs>`
</ion-content>

仪表板：

export class DashboardTabsPage implements AfterViewInit {

  @ViewChild('myTabs') tabRef: Tabs;
  @ViewChild(SettingsPage) settingPage;
  tab1 = SettingsPage;
  tab2 = ProfilePage;
  title:string;

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

  ngAfterViewInit() {
    this.title = this.settingPage.title;
  }
}

设置：-

@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
    export class SettingsPage {
      title:string;
      constructor() {
      }
      ionViewDidLoad() {
        this.title="Setting Screen";
        console.log('ionViewDidLoad SettingsPage');
      }
    }