Angular 6 - 如何在 ngComponentOutlet 中传递数据 [英] Angular 6 - How to pass data in ngComponentOutlet

问题描述

我是 angular 6 的新手.

我在 for 循环中使用 ngComponentOutlet

我想知道如何将数据传递给我的子组件

我的 HTML

<ng-container *ngComponentOutlet="currentComponent"></ng-container>

我的父组件决定选择哪个组件

导出类 MyParentComponent 实现 OnInit {构造函数(私有路由:ActivatedRoute，私有 commonService:CommonService){}动态组件 = {'第一个孩子': {'1':第一个子组件}};当前组件:任何；项目:任何；ngOnInit() {//从解析器获取数据const routeResult = this.route.snapshot.data.data.result;this.items = routeResult.items;//在路由的基础上选择子组件const routeParams = this.route.snapshot.params;this.currentComponent = this.dynamicComponents[routeParams.pageName][routeParams.templateType];}}

我的子组件

导出类 FirstchildComponent 实现 OnInit {@Input() 杂志数据:任何[]；构造函数(){}ngOnInit() {}}

所以我想将项目(循环的单个项目)作为输入传递给 FirstchildComponent

我该怎么做?

我已经检查过注射器

但由于我是新手，我不太了解注射器的工作原理

解决方案

正如您已经指出的，您需要使用将提供所有基本依赖项数据的 Injector.

MyParentComponent

@Component({...})导出类 MyParentComponent {构造函数(私有注入:注入器){}创建注射器(项目){让注入器 = Injector.create([{ 提供:项目，使用价值:项目}], this.inj);回油器；}}

项目类别

如果没有，您将拥有 Item 的类，然后创建一个具有所有属性的新类 -

@Injectable()出口类项目{...}

html

<ng-container *ngComponentOutlet="currentComponent; injector:createInjector(item)"></ng-container>

动态组件

导出类 FirstchildComponent 实现 OnInit {@Input() 杂志数据:任何[]；构造函数(){}ngOnInit(private item : Item) {//<-- 项目内容在这里.}}

<块引用>

注意:代码是直接在 stackoverflow 编辑器上编写的，因此可能存在拼写错误和语法错误.请自行纠正.

I am new in angular 6.

I am using ngComponentOutlet in a for loop

I want to know how can I pass the data to my child component

My HTML

<div *ngFor="let item of items">
    <ng-container *ngComponentOutlet="currentComponent"></ng-container>
</div>

My parent component who decides which component to chose

export class MyParentComponent implements OnInit {

	constructor(private route: ActivatedRoute, private commonService: CommonService) { }

	dynamicComponents =  {
		'firstchild': {
			'1': FirstchildComponent
		}
	};

	currentComponent: any;
	items: any;

	ngOnInit() {
    // To get data from resolver
		const routeResult = this.route.snapshot.data.data.result;
		this.items = routeResult.items;
    
    // select child component at basis of route
		const routeParams = this.route.snapshot.params;
		this.currentComponent = this.dynamicComponents[routeParams.pageName][routeParams.templateType];
	}
}

My child component

export class FirstchildComponent implements OnInit {
	@Input() magazineData: any[];
	constructor() { }

	ngOnInit() {
	}
}

So I want to pass item (single item of loop) to FirstchildComponent as a input

How can I do it?

I have checked with Injector

But as I am new, I don't really understand how injector works

解决方案

As you already had pointed out that you need to use the Injector which will provide all essential dependency data.

MyParentComponent

@Component({...})
export class MyParentComponent  {

  constructor(private inj: Injector) {}

  createInjector(item){
    let injector = Injector.create([
      { provide: Item, useValue: item }
    ], this.inj);
    return injector;
  }
}

Item Class

You will be having the class for Item if not then create new one with all properties -

@Injectable()
export class Item{
   ...
}

html

<div *ngFor="let item of items">
    <ng-container *ngComponentOutlet="currentComponent; injector:createInjector(item)"></ng-container>
</div>

Dynamic Component

export class FirstchildComponent implements OnInit {
    @Input() magazineData: any[];
    constructor() { }

    ngOnInit(private item : Item) {  //<-- item content is here.
    }
}

Note : The code has be written directly on stackoverflow editor so there could be typo and syntactical error. Please correct yourself.

这篇关于Angular 6 - 如何在 ngComponentOutlet 中传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！