Angular - нг-контент от бабушки и дедушки к ребенку - PullRequest
Новая
       47

Angular - нг-контент от бабушки и дедушки к ребенку

0 голосов
/ 17 июня 2020

Я создаю набор компонентов формы на заказ в Angular 9. Один из них - раскрывающийся список учетных записей, который использует другой компонент раскрывающегося списка в своем шаблоне. Компонент Dropdown List уже имеет logi c, который использует проекцию содержимого (ng-content) для отображения любых компонентов сообщения, обнаруженных в его созданной разметке, как сообщения об ошибках. Что я хотел бы сделать, так это создать экземпляр компонента сообщения (дочерний) внутри раскрывающегося списка учетной записи (дедушка), как показано ниже, но отобразить html для сообщения внутри раскрывающегося списка (родительский).

Приложение HTML: 

   <b-account-dropdown formControlName="account">
    <b-account-dropdown-label>Error</b-account-dropdown-label>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-message [error]="true">
      <strong>Error:</strong>
      Ooops, it looks like something has gone wrong.
    </b-message>
  </b-account-dropdown>

account-dropdown.component. html

<b-dropdown-list
  [showIndicators]="true"
  [placeholder]="placeholder"
  [scrollable]="scrollable"
>
  <b-dropdown-list-label>
    <ng-content select="b-account-dropdown-label"></ng-content>
  </b-dropdown-list-label>
  <ng-container ngProjectAs="b-tooltip-icon">
    <ng-content select="b-tooltip-icon"></ng-content>
  </ng-container>
  <b-dropdown-list-option
    *ngFor="let item of items"
    [value]="item.value"
    [disabled]="item.disabled"
    ></b-dropdown-list-option> 
</b-dropdown-list>

dropdown-list.component. html

    <!-- HTML FOR DROPDOWN HERE -->

    <div *ngIf="messages.length">
      <ng-content select="b-message"></ng-content>      
    </div>

Кто-нибудь знает, возможно ли это и как?

Спасибо

1 Ответ

0 голосов
/ 17 июня 2020

Вы можете использовать сервис для этого 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ShareService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();
  setParam(param:string) { this.paramSource.next(param)}    
}

добавить конструктор компонентов сервиса 

constructor(private shareService: ShareService

установить в дедушке и дедушке 

this.shareService.setParam(param);

читать из дочернего элемента, например 

 this.shareService.sharedData.subscribe(data=> { console.log(data) })

не забудьте добавить сервис в модули приложений в качестве провайдеров 

  providers:[ShareService ]
...