Angular 2-如何在不两次渲染子组件的情况下将数据传递给子组件? [英] Angular 2 - how to pass data to a child component without rendering the child component twice?

问题描述

我想将对象从app.component传递到子组件(home.component).我是否使用了错误的路由方式，这就是为什么要将对象传递给的子组件被渲染两次的原因?我该如何避免呢?我想这可能也是第二次渲染组件时未定义该对象的原因.

I want to pass an object from app.component to a child component (home.component). Am I using routing the wrong way and that's why the child component I want to pass the object to is being rendered twice? How can I avoid it? I guess that might also be the reason why that object is undefined the second time the component is rendered.

我已经谷歌搜索了好几天，似乎没有任何反应.我正在看一个视频教程，但是我猜它是基于Angular 2 RC3的.我正在使用Angular 2.1.1

I've been googling for several days now and nothing seems to work. I was following a video tutorial but it was based on Angular 2 RC3 or earlier I guess. I am using Angular 2.1.1

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

If I remove the line below, the child component is generated only once. But then I can't pass the object to it.

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

代码如下:

app.component.ts:

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:

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:

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:

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

推荐答案

这是一个已知问题

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

当前绑定不适用于动态添加的组件. 但是您可以强制性地传递数据，例如:

Binding currently just doesn't work with components added dynamically. But you can pass data imperatively like:

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

这也可能与之相关

• 如何将数据注入Angular2组件是从路由器创建的?

这篇关于Angular 2-如何在不两次渲染子组件的情况下将数据传递给子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！