Question

我在子组件中使用primeng multiSelect控件。我希望将其附加到上面所示的父组件中定义的元素上。当我运行npm run build：prod时，以上代码失败。它无法访问子项中的popupContent。谁能帮助您访问子组件中的父元素？

**Parent component:**

                <tbody app-sg-add-edit-subline-agg (sublineSave)="onSublineSave($event)" #popupContent>   
                </tbody>

**sg-add-edit-subline-agg component:**
                <p-multiSelect optionLabel="name"
                   [options]="sublines"
                   formControlName="name"
                   [appendTo]="popupContent">

谢谢

Answer 1

谁能帮助您访问子组件中的父元素？

The Example shown below is from the Angular Documents

父级将需要使用@Input()功能发送数据。但是，还有其他方式可以像使用service那样将信息从“子级”传递到“父级”和“父级到子级”。这只是一个基本示例。

父组件 从'@ angular / core'导入{组件};

import { HEROES } from './hero';
    @Component({
      selector: 'app-hero-parent',
      template: `
        <h2>{{master}} controls {{heroes.length}} heroes</h2>
        <app-hero-child *ngFor="let hero of heroes"
          [hero]="hero"
          [master]="master">
        </app-hero-child>
      `
    })
    export class HeroParentComponent {
      heroes = HEROES;
      master = 'Master';
    }

子组件

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

Answer 2

说明：

我们正在使用参考模板变量来通过#popupComponent获得父对象的参考。然后，将其作为@Input（）属性传递给子级。

父组件：

<tbody app-sg-add-edit-subline-agg 
       (sublineSave)="onSublineSave($event)" 
       #popupContent [popupContent]="popupContent">   
</tbody>

sg-add-edit-subline-agg.component.html：

<p-multiSelect optionLabel="name"
[options]="sublines"
formControlName="name"
[appendTo]="popupContent">

确保在sg-add-edit-subline-agg.component.ts

中添加@Input属性

@Input() popupContent;

StackBlitz，上面是一个简单的例子：https://stackblitz.com/edit/primeng-parent-child?file=app%2Fapp.component.html

angular 7如何通过子组件模板的父组件中定义的id访问元素

2 个答案: