Передать ng-контент дочернему компоненту - PullRequest
Новая
       16

Передать ng-контент дочернему компоненту

0 голосов
/ 06 марта 2019

спасибо за ваше время.

У меня есть три компонента:

  1. Компонент главной страницы
  2. Кнопка, использующая angular/cdk/overlay overlay.create для созданиятретий компонент
  3. Небольшое поле, прикрепленное к кнопке, на которой отображается текст

Цель состоит в том, чтобы отображать информацию о странице, когда пользователь нажимает кнопку.Я не могу использовать @Input, потому что формат (h1, p, компонент) информации будет меняться для каждой страницы.

Мой вопрос

Как передать HTML из основного компонента в компонент небольшого блока?

или

Как перехватить содержимоеng-content и отправить его компоненту маленького ящика?

Основной 

<app-btn-info>
   <mat-icon>info</mat-icon>
   <h1>Test</h1>
   <p>This is a test</p>
</app-btn-info>

Кнопка 

@Component({
  selector: 'app-btn-info',
  templateUrl: './btn-info.component.html',
  styleUrls: ['./btn-info.component.scss']
})
export class BtnInfoComponent {

  @ViewChild('button') button: MatIcon;

  constructor(private overlay: Overlay) { }

  public onClick() {
    this.overlay.create({
      positionStrategy: this.overlay.position().connectedTo(this.button._elementRef,
        { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }
      )
    });
  }

}

<button #button mat-icon-button color="warn" matTooltip="Choose an option" (click)="onClick()">
    <mat-icon>refresh</mat-icon>
</button>

Шкатулка 

<!-- From Main Component - But open by BtnInfoComponent -->
<ng-content></ng-content>

1 Ответ

0 голосов
/ 06 марта 2019

Вы можете передать html из основного компонента в небольшой блок, используя проекцию контента. Пожалуйста, перейдите по этой ссылке, чтобы узнать, как использовать контент проекции https://www.infragistics.com/community/blogs/b/infragistics/posts/simplifying-content-projection-in-angular

...