具有多个子组件实例的 Angular2 父组件

问题描述

我有一个带有模板的父组件，该模板引用了同一子组件的多个实例.子组件将具有相同的组件/模板实现，但应多次实例化并呈现不同的数据集.我查看了很多帖子，例如 两次实例化 Angular 2 组件，但所有其中似乎使用了已弃用的指令组件属性.

I have a parent component with a template that references multiple instances of the same child component. The child components would have the same component/template implementation but should be instantiated multiple times and would render different data sets. I looked into a lot of posts like Instance Angular 2 Component Two times but all of them seemed to use the deprecated directives component attribute.

parent.template.html

parent.template.html

<child-component data="foo"></child-component>
<child-component data="baz"></child-component>

data.service.ts

data.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
    getFooData(): Object {
        return { name: 'Foo' }
    }

    getBazData(): Object {
        return { name: 'Baz' }
    }
 }

child.template.html

child.template.html

<h1>{{objectToRender.name}}</h1>

child.component.ts

child.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { DataService }              from './data.service';

@Component({
    selector:       'child-component',
    templateUrl:    'child.template.html',
    providers:      [ DataService ]
})
export class ChildComponent  implements OnInit {
    @Input() data: String;
    objectToRender: Object;
    ds:             DataService

    constructor( private dataService: DataService ) {
        this.ds = dataService;
    }

    ngOnInit(){
        switch( this.data ) {
            case 'foo':
                this.objectToRender = this.ds.getFooData();
            case 'baz':
                this.objectToRender = this.ds.getBazData();
        }
    }

}

app.module.ts

app.module.ts

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { AppComponent }         from './app.component';
import { ParentComponent}     from './parent.component';
import { ChildComponent }     from './child.component';


@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent, ParentComponent, ChildComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

结果:巴兹巴兹

预期:富巴兹

在这个Plunker中可以看到我的问题的一个更简化的版本.我一起省略了模板文件，并使用根应用程序组件作为父组件.https://plnkr.co/edit/QI5lGH3S9a5o3b1ajPBl?p=preview

An even simplified version of my problem can be seen in this Plunker. I've omitted template files all together and use the root app component as a parent.https://plnkr.co/edit/QI5lGH3S9a5o3b1ajPBl?p=preview

非常感谢！

推荐答案

这是缺失的 break;

    switch( this.data ) {
        case 'foo':
            this.objectToRender = this.ds.getFooData();
            break;
        case 'baz':
            this.objectToRender = this.ds.getBazData();
            break;
    }

Plunker 示例

这篇关于具有多个子组件实例的 Angular2 父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！