Как передать данные от родителя к ребенку и от ребенка к родителю

Question

Я новичок в Angular и на экране DashBoard у меня есть SideMenu с несколькими вкладками.

Когда я выбираю соответствующую вкладку, заголовок панели навигации должен меняться.

Я нашел 3 способа связи между компонентами

1) Обмен данными через @Input
2) Обмен данными через @ViewChild
3) Обмен данными через @Output() и EventEmitter

Я попробовал второй способ выполнить свое требование, но получаю исключение TypeError: невозможно получить свойство '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');
      }
    }