角4 - DIで親に新しい子コンポーネントを作成

Question

* ngForで表示される子コンポーネントの配列があります。 私の子コンポーネントは、DataServiceを注入する必要があります。コンパイラがコンストラクタ用のDataServiceのインスタンスを必要とすることについて不平を言ったときに、新しいChildComponent（）を作成するにはどうすればよいですか？

親コンポーネント：

import { Component, OnInit } from '@angular/core'; 
import {SkipComponent} from "../skip/skip.component"; 
import { DataService } from '../services/data.service'; 


@Component({ 
    selector: 'app-skips', 
    templateUrl: './skips.component.html', 
    styleUrls: ['./skips.component.css'], 
    providers: [ DataService ] 
}) 
export class SkipsComponent implements OnInit { 

    public childItems: SkipComponent[] = [new SkipComponent()]; 

    public removeSkip(skip){ 

    var index = this.childItems.findIndex((elt) => (elt===skip)); 
    if (index != -1) { 
     this.childItems.splice(index, 1); 
    } 
    } 

    public onAdd(){ 
    this.childItems.push(new SkipComponent()); 
    } 

    constructor() { 
    } 

    ngOnInit() { 
    } 

子コンポーネント：

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

@Component({ 
    selector: 'app-skip', 
    templateUrl: './skip.component.html', 
    styleUrls: ['./skip.component.css'], 
    providers: [ DataService ] 
}) 
export class SkipComponent implements OnInit { 

    @Input() skip: any; 

    @Output() 
    onSkipRemove: EventEmitter<any> = new EventEmitter(); 

    containers: any[]; 

    public removeSkip(){ 
    this.onSkipRemove.emit(
     this.skip 
    ) 
    } 

    constructor(private dataService: DataService) { 
    this.dataService.getContainers().subscribe(res=>this.containers=res); 
    } 

    ngOnInit() { 
    } 

} 

Answer 1

フレームワークによってインスタンス化するときに、明示的newオペレータとSkipComponentをインスタンス化するときDIは、たまたま、あなたがに渡す必要がありますサービス。

constructor(private dataServices: DataService){} 

、その後、あなたがSkipComponentを作成するとき、コンストラクタに渡し：DataServiceのホールドを取得し、トップレベル（SkipsComponent）で

：だからあなたのソリューションになります

this.childItems.push(new SkipComponent(this.dataService));