Как загрузить ng-шаблон отдельным файлом?

В приведенном ниже примере я использовал ng-template, как показано ниже, и он работает нормально.

Пример ссылки: нажмите здесь

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
        <button ejs-button cssClass="e-info">Sign In</button>
      </span>
</ng-template>

Но я хочу создать новый файл для ng-template содержимого и хочу использовать его в другом файле. Я пробовал, как показано ниже, но не работал. Пожалуйста, помогите мне найти решение для этого случая.

template.html

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
</ng-template>

default.html

<div class="control-section">
  <ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-container *ngTemplateOutlet="template;"></ng-container>
  </ejs-menu>
</div>

Пример 2: образец 2

ref stackoverflow question: angular2 ng-template в отдельном файле


angular html ng-template ng-container
person Kumaresan Sd    schedule 06.12.2018    source источник
comment
возможный дубликат: stackoverflow.com/questions/48555286/   -  person Joel Joseph    schedule 06.12.2018
comment
Привет @JoelJoseph, это не так. Пожалуйста, прочтите мой вопрос   -  person Kumaresan Sd    schedule 06.12.2018
comment
вы можете создать отдельный компонент с вашим кодом ‹ng-template› и использовать селектор того же компонента, чтобы вы могли использовать его в других местах, как описано в статье в моем комментарии   -  person Joel Joseph    schedule 06.12.2018
comment
я уже пробовал не работать образец ссылки: stackblitz.com/edit /   -  person Kumaresan Sd    schedule 06.12.2018
comment
здесь вы будете передавать данные компоненту или создавать службу для связи между родительским и дочерним компонентами. в приведенном выше stackblitz вы не передаете данные компоненту   -  person Joel Joseph    schedule 06.12.2018
comment
не могли бы вы обновить этот образец и объяснить ..   -  person Kumaresan Sd    schedule 06.12.2018

Ответы (3)


arrow_upward
10
arrow_downward

я получил ответ на этот вопрос от github angular, пожалуйста, проверьте это https://github.com/angular/angular/issues/27503

Отвечать:

шаг 1:

я инициализировал свой шаблон как новый компонент, как показано ниже

template.component.ts

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

@Component({
  selector: 'app-device',
  template: `
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
`
})
export class DeviceComponent {
  @Input()
  dataSource: any;
}

Затем я использовал этот шаблон компонента в своем родительском компоненте, как показано ниже

default.html

<div class="control-section">
	<ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-template #template let-dataSource>
      <app-device [dataSource]="dataSource"></app-device>
    </ng-template>
  </ejs-menu>
</div>

образец ссылки образец нажмите меня

person Kumaresan Sd    schedule 07.12.2018
comment
Наконец, вы не смогли использовать ngTemplateOutlet для этого? - person Adir D; 24.11.2020

arrow_upward
1
arrow_downward

Вы можете использовать * ngTemplateOutlet для архивации того же

Пожалуйста, перейдите по ссылке ниже

ngTemplateOutlet

person siddharth shah    schedule 06.12.2018
comment
Я пробовал не работать. образец ссылки: stackblitz.com/edit/angular-mdksym-5uqyyb?file = default.html - person Kumaresan Sd; 06.12.2018

arrow_upward
0
arrow_downward

Вы можете иметь компонент для ваших шаблонов (назовите его tplComponent) и внутри него создавать столько шаблонов, сколько хотите. Затем в других компонентах получите экземпляр tplComponent и получите из него шаблон. Вот вопрос, в котором есть пример этого подхода (я не хотя и не пробовал).

Пожалуйста, дайте мне знать, если это сработает.

person Vahid    schedule 06.12.2018