Angular 2 - como passar dados para um componente filho sem renderizar o componente filho duas vezes?

Quero passar um objeto de app.component para um componente filho (home.component). Estou usando o roteamento da maneira errada e é por isso que o componente filho para o qual desejo passar o objeto está sendo renderizado duas vezes? Como posso evitar isso? Acho que essa também pode ser a razão pela qual esse objeto é indefinido na segunda vez que o componente é renderizado.

Estou pesquisando no Google há vários dias e nada parece funcionar. Eu estava seguindo um tutorial em vídeo, mas era baseado no Angular 2 RC3 ou anterior, eu acho. Estou usando o Angular 2.1.1

Se eu remover a linha abaixo, o componente filho será gerado apenas uma vez. Mas então não posso passar o objeto para ele.

 <app-home [testdata]="testdata"></app-home>

Aqui está o código:

app.component.ts:

import { Component, Output } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'Welcome';
  testdata = {
    somedata: 'Here is the data'
  };
}

app.component.html:

<header>
  <h1>
    {{title}}
  </h1>
  <nav>
    <ul>
      <li><a routerLink="/" routerLinkActive="active">Home</a></li>
      <li><a routerLink="/directory">Directory</a></li>
    </ul>
  </nav>
</header>
<section id="main">
  <app-home [testdata]="testdata"></app-home>
  <router-outlet></router-outlet>
</section>

home.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})
export class HomeComponent implements OnInit {
  homeTitle = "Welcome to the homepage";
  @Input() testdata: any;

  constructor() {
  }

  ngOnInit() {
  }

}

app.routes.ts:

import { Routes, RouterModule } from "@angular/router";
import { DirectoryComponent } from "./directory/directory.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES = [
  { path: '', component: HomeComponent }
];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

main.ts:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
import { APP_ROUTES_PROVIDER } from './app/app.routes';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule, [APP_ROUTES_PROVIDER]);