Как мне сделать страницы с использованием ngTemplate и ngContainer - PullRequest
Новая
       39

Как мне сделать страницы с использованием ngTemplate и ngContainer

0 голосов
/ 17 февраля 2020

например: 

├── modal
│   ├── layer
│   └──── layer.component.html
│   └──── layer.component.ts
│   │
│   ├── warningModal
│   └──── warningModal.component.html
│   └──── warningModal.component.ts
└

Моя цель - создать модальную структуру со слоем. И использование этого модального режима означает создание только внутренней части модального предупреждения.

layel.component. html

<ng-container *ngTemplateOutlet="control"></ng-container>

warningModal.component.ts 

<ng-template #control>
  <p>hello guys</p>
</ng-template>

почему не работает? Если бы я написал это в одном файле, это бы сработало. Но это не работает, когда вы пишете в разные компоненты. Как я могу это сделать?

1 Ответ

1 голос
/ 17 февраля 2020

1) Когда вы пишете обе строки в один момент времени, шаблон, необходимый для ngTemplateOutlet, присутствует в одном месте, поэтому он работает

2) Когда они находятся в двух разных компонентах, между ними нет никакой связи other Таким образом, при передаче ngTemplateOutlet="options" он просто принимает ее как строку, а не переменную ссылки на шаблон, поэтому ничего не отображается

Используйте этот метод

warningModal.component. html │ 

<app-layer [temp]="control"></app-layer>
<ng-template #control>
  <p>hello guys</p>
</ng-template>

layer.component.ts 

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

@Component({
  selector: 'app-layer',
  templateUrl: './layer.component.html',
  styleUrls: ['./layer.component.css']
})
export class LayerComponent{
  @Input() temp
}

layer.component. html

<ng-container *ngTemplateOutlet="temp"></ng-container>

Рабочая ссылка

https://stackblitz.com/edit/angular-xzlyhq?embed=1&file=src / app / layer / layer.component. html

...