Внедрение компонента в ng-контейнер? (загрузить ng-шаблон из файла)

Я пытаюсь создать простое меню вкладок в своем приложении Angular.

parant.component.html:

<div>
  <button (click)="selectTab(1)">Tab1</button>
  <button (click)="selectTab(2)">Tab2</button>

  <ng-container *ngTemplateOutlet="(selected == 1) ? template1 : template2">
  </ng-container>

  <ng-template #template1>I'm page 1</ng-template>
  <ng-template #template2>I'm page 2</ng-template>
</div>

parant.component.ts:

public selected = 1;
public selectTab(tabName) {
  this.selected = tabName;
}

Это работает нормально, пока <ng-template> является частью той же HTML-страницы. Теперь мои страницы (содержимое #template1 и #template2) становятся сложными, и я хочу переместить их в отдельные компоненты.

Как я могу ввести компонент в <ng-container>??


javascript angular ng-template ng-container
person Gil Epshtain    schedule 04.12.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Чтобы внедрить компонент в <ng-container>, вам не нужно было использовать *ngTemplateOutlet, вместо этого используйте *ngComponentOutlet.

Вы можете увидеть полный API по адресу: NgComponentOutlet.

tab1.component.html:

<p>tab1 works!</p>

tab2.component.html:

<p>tab2 works!</p>

parant.component.html:

<div>
  <button (click)="selectTab(1)">Tab1</button>
  <button (click)="selectTab(2)">Tab2</button>

  <ng-container *ngComponentOutlet="activeTab">
  </ng-container>
</div>

parant.component.ts:

import { Tab1Component } from './tab1.component';
import { Tab2Component } from './tab2.component';
...

public activeTab = Tab1Component;

public selectTab(tabName) {
  if (tabName == 1) {
    this.activeTab = Tab1Component ;
  }
  else if (tabName == 2) {
    this.activeTab = Tab2Component ;
  }  
}

И не забудьте добавить эти динамические компоненты в раздел entryComponents.

app.module.ts:

import { Tab1Component } from './tab1.component';
import { Tab2Component } from './tab2.component';
...
@NgModule({
  ...
  entryComponents: [
    Tab1Component,
    Tab2Component,
    ...
person Gil Epshtain    schedule 04.12.2019

arrow_upward
1
arrow_downward

compnent-templet1 и compnent-templet2 — это имя компонента, который ранее был в ng-templet, теперь вы помещаете их в компонент *

 <ul>
            <li *ngFor='let link of links'>
                <ng-container 
                     [ngTemplateOutlet]="link.type == 'complex' ?complexLink : simpleLink" 
                     [ngTemplateOutletContext]="{link:link}">
                </ng-container>
            </li>
        </ul>

        <ng-template #simpleLink let-link='link'>
            Simple : {{ link.name }}
    <compnent-templet2 [input]="link.somevalue"></compnent-templet2>
        </ng-template>

        <ng-template #complexLink let-link='link'>
            Complex : {{ link.name }}
    <compnent-templet1 [input]="link.somevalue"></compnent-templet1>

person Jadli    schedule 04.12.2019
comment
Но если у меня 15 вкладок, мне нужно добавить им все тот же html? нельзя ли разделить их в отдельные файлы? - person Gil Epshtain; 04.12.2019
comment
вы можете создать один компонент, который будет отвечать за ввод правильного компонента, вы можете передать некоторое значение ввода компоненту, тогда этот компонент решит, какой компонент действительно должен быть частью ng-templat - person Jadli; 04.12.2019