我是 Angular 6 的新手。
我在 for 循环中使用
ngComponentOutlet
我想知道如何将数据传递给我的子组件
我的 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
作为输入
我该怎么做?
我已经检查过注射器
但是由于我是新人,我不太明白注射器是如何工作的
正如您已经指出的,您需要使用注入器,它将提供所有必要的依赖数据。
###我的父组件
@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{
...
}
<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 编辑器上编写的,因此可能存在拼写错误和语法错误。请自行更正。
ViewContainerRef、ComponentFactoryResolver 在创建动态组件时比 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);
}
}