Извините. Я новичок в 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>