[英]<ng-template> show in other component
我有 2 個組件。
父組件的.html
這是代碼:
<div class="space">
<ng-container *ngFor="let item of items">
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{item: item}">
</ng-container>
</ng-container>
</div>
<ng-template #itemTemplate let-item="item">
<div class="host">
<img class='card-img-top'
src={{item.image}}
>
<p> </p>
<h6 class="title">{{item.projectTitle}}</h6>
<hr>
<ng-container *ngIf="item.type=='inactive'">
<button id="inactive"
class="btn btn-sm btn-warning py-0 custom-button text-uppercase">{{item.type}}</button>
</ng-container>
</div>
</ng-template>
從以下行開始的所有代碼: <ng-template #itemTemplate let-item="item">
必須在子組件的.html
中顯示。
這是。 父組件的ts
import { AfterViewInit, Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, OnInit, TemplateRef, Input, ContentChild } from '@angular/core';
import listProjects from './projects.json';
import { ChildComponent } from './child.component';
@Component({
selector: 'parent-view',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
public items: any = listProjects;
@ContentChild('itemTemplate', { read: TemplateRef }) itemTemplate: ViewContainerRef;
如何在其他組件中顯示<ng-template #itemTemplate let-item="item">
?
這個問題的解決方案:
文件: projects-tile-view-components.ts
export class ProjectsTileViewComponent {
@ViewChild('tileViewItems', { static: true }) tileViewItemTemplate: TileViewComponent;
public items = listProjects;
public type = 'etb';
constructor() {}
addItems(e) {
if (this.type === 'osd') {
this.type = 'etb';
} else {
this.type = 'osd';
}
}
}
文件projects-tile-view-components.html
<lib-tile-view [items]="items" #tileViewItems>
<ng-template #tileViewItem let-item>
<div [ngSwitch]="type">
<lib-osd-tile-view-item [item]="item" *ngSwitchCase="'osd'"></lib-osd-tile-view-item>
<lib-osd-tile-view-item [item]="item" *ngSwitchDefault></lib-osd-tile-view-item>
<lib-etb-tile-view-item [item]="item" *ngSwitchCase="'etb'"></lib-etb-tile-view-item>
</div>
</ng-template>
</lib-tile-view>
文件view-item.ts
(界面)
export interface ViewItem {
item: any;
}
文件tile-view-components.html
<div>
<ng-container *ngFor="let item of items">
<ng-container *ngTemplateOutlet="tileViewItemTemplate; context: {$implicit: item}">
</ng-container>
</ng-container>
</div>
文件tile-view-item.components.ts
@Component({
selector: 'lib-tile-view',
templateUrl: './tile-view.component.html',
styleUrls: ['./tile-view.component.scss'],
})
export class TileViewComponent {
@Input()
public items: any;
@ContentChild('tileViewItem', { static: true }) tileViewItemTemplate;
}
文件osd-tile-view-components.ts
@Component({
selector: 'lib-osd-tile-view-item',
templateUrl: './osd-tile-view-item.component.html',
styleUrls: ['./osd-tile-view-item.component.scss'],
})
export class OsdTileViewItemComponent implements ViewItem {
@Input() item: any;
public projectView() {
alert('show project');
}
}
文件osd-tile-view-item.components.html
<div class="host" fxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(100% - 32px)" fxFlex.lt-sm="100%" (click) = 'projectView()'>
<img class='img-fluid img-thumbnail' src={{item?.image}} alt='logo nih'>
<p> </p>
<h6 class="title">{{item?.projectTitle}}</h6>
<p class="small"><span class="text-muted small text-uppercase">ZIA ID
Number:</span>{{item?.number}}</p>
</div>
謝謝你的幫助
您需要在服務中共享此TemplateRef
(如果您想訪問應用程序中的每個組件),然后在其他組件中您可以閱讀此參考並對其進行處理 - 因為如果您只想將此參考傳遞給子,那么您可以在子組件中使用@Input()
,但如果它應該在所有組件中都可用,那么您需要創建服務。
服務:
@Injectable({
providedIn: 'root'
})
export class TemplateService {
someTemplate: TemplateRef<any>;
}
組分A:
@Component({
selector: 'parent-view',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss'],
})
export class ParentComponent {
public items: any = listProjects;
@ViewChild('itemTemplate', { read: TemplateRef }) set itemTemplate(value) {
this.ts.someTemplate = value;
}
construtor(private ts: TemplateService) {}
}
然后在任何其他組件中,您可以閱讀此模板參考
組分B:
@Component({
selector: 'component-b',
templateUrl: './component-b.component.html',
styleUrls: ['./component-b.component.scss'],
})
export class ComponentBComponent {
get itemTemplateReference() {
return this.ts.itemTemplate;
}
construtor(private ts: TemplateService) {}
}
.html
的組件B
<ng-container [ngTemplateOutlet]="itemTemplateReference"></ng-container>
它應該呈現相同的<ng-template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.