angular 7 как получить доступ к элементу по идентификатору, определенному в родительском компоненте из шаблона дочернего компонента - PullRequest
Новая
       19

angular 7 как получить доступ к элементу по идентификатору, определенному в родительском компоненте из шаблона дочернего компонента

0 голосов
/ 26 апреля 2019

Я использую элемент управления 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">

Спасибо

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Объяснение:

Мы используем переменную шаблона ссылки, чтобы получить ссылку на родителя с помощью #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">

Обязательно добавьте свойство @Input в sg-add-edit-subline-agg.component.ts 

@Input() popupContent;

StackBlitz с более простымПример вышеуказанной концепции: https://stackblitz.com/edit/primeng-parent-child?file=app%2Fapp.component.html

0 голосов
/ 26 апреля 2019

Может кто-нибудь помочь, как получить доступ к родительскому элементу в дочернем компоненте?

Пример, показанный ниже, взят из угловых документов

Родитель должен будет отправить данные, используя функцию @Input(). Однако существуют другие способы передачи информации от ребенка к родителю и от родителя к ребенку, например, с помощью service. Это просто базовый пример.

Родительский компонент import {Component} из '@ 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;
}
...