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(compRef: ComponentRef<any>) {
  if(compRef instanceof HomeComponent) {
    compRef.testdata = this.testdata;
  }
}

<强> Plunker Example

这也可能是相关的

How to inject data into Angular2 component created from a router

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

1 个答案: