Question

说，Angular中的两个组件之间有关系：

// Parent component: ParentComponent
// Child component: ChildComponent

// in ParentComponent template
<pp-child></pp-child>

------

export class ChildComponent implements OnInit {
  constructor(
    // wonder if there's something like:
    // private parentRef: HostParentRef
  ) {}
  ngOnInit() {
    console.log(this.parentRef); // This would print ParentComponent
  }
}

我想知道的是，是否有办法在ChildComponent级别找到其父组件的类型。如果有的话，在这种情况下，我会得到ParentComponent。

任何见识将不胜感激！

编辑： 我不是在谈论访问父母的财产或在两者之间进行交流。我只是想知道运行时组件的父组件的类型。

Answer 1

您可以通过传递参数作为父级名称来做到这一点，以便您的子级组件可以知道谁是父级组件以及要处理哪些数据

<pp-child [parentInfo]="parentData"> </pp-child>

并将子组件中的输入作为

@Input() parentInfo;
constructor(){
 console.log(parentInfo);
}

您也可以使用此关键字来获取父母的信息

<pp-child [parentInfo]="this"> </pp-child>

然后，当您检查parentInfo关键字时，您还将获得整个父组件信息。
或者您可以像在javascript中一样获取元素的父元素，但是如果它在div中，它将为您提供直接的父元素，例如div

Answer 2

您可以使用eventEmitter。

这是一个小例子，将为您提供一些见识：

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

此URL将获得一些帮助： https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

有没有办法在Angular的子组件级别中找到其父组件的标识/类型？

2 个答案: