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]);
推荐答案
这是一个已知问题
绑定目前不适用于动态添加的组件.但是你可以命令式地传递数据,比如:
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;
}
}
这也可能是相关的
这篇关于Angular 2 - 如何在不渲染子组件两次的情况下将数据传递给子组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!