Angular 2 - 如何在不渲染子组件两次的情况下将数据传递给子组件？

Question

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

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

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

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

代码如下：

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]);

Answer 1

这是一个已知问题

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

绑定目前不适用于动态添加的组件。 但是你可以命令式地传递数据，比如：

app.component.html

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

app.component.ts

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

Plunker Example

这也可能是相关的

• How to inject data into Angular2 component created from a router?