Angular 2 - 如何将数据传递给子组件而不渲染子组件两次？

我想将一个对象从 app.component 传递到子组件（home.component）。我是否使用了错误的路由方式，这就是为什么我想要将对象传递给的子组件被渲染两次？我怎样才能避免它？我想这也可能是第二次渲染组件时该对象未定义的原因。

我已经用谷歌搜索了好几天了，似乎没有任何效果。我正在观看视频教程，但我猜它是基于 Angular 2 RC3 或更早版本的。我正在使用 Angular 2.1.1

如果我删除下面的行，则子组件仅生成一次。但是我无法将对象传递给它。

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

这是代码：

应用程序组件.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'
  };
}

应用程序组件.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() {
  }

}

应用程序.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]);

这是一个已知问题

• https://github.com/angular/angular/issues/4452

绑定目前不适用于动态添加的组件。 但您可以强制传递数据，例如：

应用程序组件.html

<router-outlet (activate)="activated($event)"></router-outlet>

应用程序组件.ts

activated(comp: any) {
  if(comp instanceof HomeComponent) {
    comp.testdata = this.testdata;
  }
}

笨蛋的例子

这也可能有关

• 如何将数据注入到从路由器创建的 Angular2 组件中？