角度2 - 子コンポーネントを2回レンダリングせずに子コンポーネントにデータを渡す方法は？

Question

オブジェクトをapp.componentから子コンポーネント（home.component）に渡したいとします。間違った方法でルーティングしているので、オブジェクトを渡す子コンポーネントが2回レンダリングされるのはなぜですか？どうすればそれを避けることができますか？コンポーネントがレンダリングされる2回目にそのオブジェクトが未定義になっている理由は、それが原因かもしれないと思います。

私は数日前にグーグルで行ってきましたが、何も動作していないようです。私はビデオチュートリアルに従っていましたが、これはAngular 2 RC3以前のものに基づいていました。私は角度2.1.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(compRef: ComponentRef<any>) { 
    if(compRef instanceof HomeComponent) { 
    compRef.testdata = this.testdata; 
    } 
} 

Plunker Example

のThまた

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