Как я могу передать данные в NG-контейнер - PullRequest
Новая
       17

Как я могу передать данные в NG-контейнер

1 голос
/ 15 января 2020

Извините. Я новичок в Angular:)

Я пытаюсь передать некоторые данные в шаблон

Вот компонент, который вызывает sharedComponent 

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

@Component({
  selector: 'sym-test',
  templateUrl: './test.component.html',
  styles: []
})
export class TestComponent implements OnInit {

    items = [
        '111',
        '222',
        '333'
    ];

  constructor() { }

    ngOnInit() {
  }
}

<p>test works!</p>

<sym-shared [items]="items">
    <ng-template LiTemplateDirective>
        <b>{{item}}</b>
    </ng-template>
</sym-shared>

import { Component, OnInit, Input, ContentChild, TemplateRef } from '@angular/core';
import { LiTemplateDirective } from '../li-template.directive';

@Component({
    selector: 'sym-shared',
    templateUrl: './shared.component.html',
})
export class SharedComponent implements OnInit {
    @Input() items: any[];

    @ContentChild(LiTemplateDirective, { static: true, read: TemplateRef })
    LiTemplate: TemplateRef<any>;

    constructor() { }

    ngOnInit() {
    }
}

<p>shared.component.html</p>

<ul>
    <li *ngFor="let item of items; index as i;">
        <ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate;"></ng-container>
    </li>
</ul>

<ng-template #defaultTemplate>
    {{item}} - Default Template
</ng-template>

По умолчанию я ожидаю, что он будет иметь маркированный список с данными элемента массива и шаблоном по умолчанию ...

  • 111 - Шаблон по умолчанию
  • 222 - Шаблон по умолчанию
  • 333 - Шаблон по умолчанию

Проблема, с которой я столкнулся, заключается в том, как мне получить данные в контейнер ng?

Я хотел бы сделать что-то подобное в shared.component. html, но я не думаю, что сделать это таким образом: 

<ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate; context: {item: item}"></ng-container>

1 Ответ

1 голос
/ 15 января 2020

используйте [ngTemplateOutletContext] в вашем ng-контейнере и добавьте элемент в ng-шаблон 

     <ul>
        <li *ngFor="let item of items; index as i;">
            <ng-container [ngTemplateOutlet]="defaultTemplate" 
                 [ngTemplateOutletContext]="{item:item}"></ng-container>
        </li>
    </ul>

    <ng-template #defaultTemplate let-item='item'>
        {{item}} - Default Template
    </ng-template>
...