Как загрузить ng-шаблон в отдельный файл? - PullRequest
Новая
       78

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

0 голосов
/ 06 декабря 2018

В приведенном ниже примере я использовал 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 вопрос: angular2 ng-template в отдельном файле

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

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

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

ngTemplateOutlet

0 голосов
/ 07 декабря 2018

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

Ответ:

step1:

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

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>

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

0 голосов
/ 06 декабря 2018

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

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

...