Question

我使用方法viewContainerRef.createComponent（）加载一个组件并将其存储在变量中。

该组件具有子组件，我需要从一种子类中获取变量。

代码将是这样的：

父：

<div #childLoader></div>

this.loadedChild1 = this.childLoader.createComponent(child1);

Child1：

<child2></child2> <another></another> <child2></child2>

CHILD2：

@Component({  
  selector: 'child2',
  templateUrl: 'child2.html'
})
export class Child2Component {

@Input() title: string;
public getTitle(){
 return this.title;
}
}

我在加载父组件后尝试访问标题，其他公共var或实际上是getTitle（）方法，忽略Child1的其他子项。

我试图从this.loadedChild1获取child2方法/ var。

这可能吗？

谢谢。

Answer 1

我看到您使用@Input将数据输入到子项中。这是使用@Output

输出的另一种方式

在您的child1组件中

@Output()
notify: EventEmitter<string> = new EventEmitter<string>();

sendTitle(): void {
  this.notify.emit(this.title);
}

在您的父html中

<child1 (notify)="getChildTitle($event)"></child1>

在您的父组件

中

getChildTitle(title: string): void{
  console.log("Received child's title: " + title);
}

关于此的精彩文章：https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/

希望这有帮助！

Answer 2

import {ViewChild, QueryList} from "@angular/core";

@Component({  
  selector: 'child1',
  templateUrl: 'child1.html'
})
export class Child1Component {
 @ViewChildren(Child2Component) childs2:QueryList<Child2Component>;
 ngAfterViewInit() {
   //do something
    this.childs2.forEach((child2)=>{

      child2.getTtile();
    });
 }
}

如何从父Angular 2获取子变量

2 个答案: