代码之家 › 专栏 › 技术社区 › kenny

角度6-如何在ngComponentOutlet中传递数据

angular6 angular

0

kenny · 技术社区 · 7 年前

我是角6的新手。

我在用 ngComponentOutlet 在for循环中

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

我的HTML

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

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

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

我的子组件

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

	ngOnInit() {
	}
}

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

我该怎么做?

我用注射器检查过了

但由于我是新来的,我真的不明白注射器是怎么工作的

1 回复 | 直到 7 年前

1

2

Sunil Singh 7 年前

正如您已经指出的,您需要使用注入器,它将提供所有重要的依赖关系数据。

我的父组件

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

  constructor(private inj: Injector) {}

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

项目类别

你将要上课 Item 如果没有,则创建一个具有所有属性的新的-

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

html格式

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

动态分量

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

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

注意:代码直接写在stackoverflow编辑器上,因此可能会出现拼写错误和语法错误。请纠正你自己。

2

0

Chiranjeevi Bhaskaruni 7 年前

创建动态组件时,组件工厂解析器ViewContainerRef比ngComponentOutlet更容易。

动态分量

模板-

<div #dynamicComponent></div>

TS - 
@ViewChild('dynamicComponent', { read: ViewContainerRef }) podViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) {
  }

  ngAfterViewInit() {
    let componentFactory;
    let componentRef;
    try {
      componentFactory = this.resolver.resolveComponentFactory(pod.component);
      componentRef = this.podViewContainerRef.createComponent(componentFactory);
      componentRef.instance.podInfo = this.podInfo;
    } catch (e) {
      console.log(e);
    }
  }