来自另一个组件的@ViewChild（）

Question

我有一个带有模板的组件（component1）：

<!-- component1.html -->
<ion-content #content></ion-content>

<ion-content>是一个角度分量。我需要从另一个组件（component2）中获取离子含量的组件。

在component1中，我可以使用@ViewChild（）指令：

@Component({
    selector: "app-component1",
    templateUrl: "./component1.html"
})
export class Component1 {
    @ViewChild('content') content: IonContent;
    // or @ViewChild(IonContent) content: IonContent;
}

但是如何获取Component2中的离子含量成分？

Answer 1

在您的 component1.html

中

<ion-content #content></ion-content>
<p> this is {{message}}</p>

在您的 component1.ts

中

@Component({
    selector: "app-component1",
    templateUrl: "./component1.html"
})
export class Component1 {
    message: string;
    @ViewChild('content') content: IonContent;//or @ViewChild(IonContent)content:IonContent;

    constructor(private changeDetectorRef: ChangeDetectorRef) { }

  ngAfterViewInit() {    
    console.log(this.content.message);  //message being variable in IonContent
    this.message = this.content.message;
    this.changeDetectorRef.detectChanges()
  }
}