Javascript <；ng模板>；在其他组件中显示

我有两个组件

父组件的

.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>&nbsp;</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>

---

如何在其他组件中显示

您需要在服务中共享此

TemplateRef

（如果您希望在应用程序中的每个组件中都有访问权限），然后在其他组件中，您可以读取此引用并对其进行处理-因为如果您只想将此引用传递给子组件，则可以在子组件中使用

@Input（）

，但如果它应该在所有组件中都可用，那么您需要创建服务

服务：

@可注入({
providedIn:'根'
})
导出类模板服务{
someTemplate:TemplateRef；
}

组成部分A：

@组件({
选择器：“父视图”，
templateUrl:“./parent.component.html”，
样式URL:['./parent.component.scss']，
})
导出类ParentComponent{
公共项目：任何=列表项目；
@ViewChild（'itemTemplate'，{read:TemplateRef}）设置itemTemplate（值）{
this.ts.someTemplate=值；
}
Constructor（私有ts:TemplateService）{}
}

然后在任何其他组件中，都可以读取此模板引用

组件B：

@组件({
选择器：'component-b'，
templateUrl:'./component-b.component.html'，
样式URL:['./component-b.component.scss']，
})
导出类组件组件{
获取itemTemplateReference（）{
返回此.ts.itemTemplate；
}
Constructor（私有ts:TemplateService）{}
}

组件B的

.html

---

它应该提供相同的

解决此问题的方法：

文件：

项目平铺视图组件。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';
    }
  }
}

@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;
}

@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');
  }
}

文件

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>

<div>
    <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="tileViewItemTemplate; context: {$implicit: item}">
        </ng-container> 
    </ng-container>
</div>

<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>&nbsp;</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>

文件

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>

<div>
    <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="tileViewItemTemplate; context: {$implicit: item}">
        </ng-container> 
    </ng-container>
</div>

<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>&nbsp;</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>

文件

osd平铺视图组件.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';
    }
  }
}

@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;
}

@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

<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>

<div>
    <ng-container *ngFor="let item of items">
        <ng-container *ngTemplateOutlet="tileViewItemTemplate; context: {$implicit: item}">
        </ng-container> 
    </ng-container>
</div>

<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>&nbsp;</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>

{{item？.projectTitle}}
ZIA ID
编号：{{item？.Number}

---

感谢您的帮助

孩子能否只渲染

ng内容

？抱歉，我现在完成了代码。我使用[ngTemplateOutlet]=“itemTemplate”有什么原因不能将html放在子组件的模板中吗？是的，有必要有一个通用组件，比如其他组件的头。那么为什么你不能有一个子组件，它是

头组件

，你可以在任何需要的地方使用它呢。你可以简单地把

Input（）

和你可能需要传递的变量放进去。我不明白。不，可以使用ng模板吗？我在回答中添加了更多信息。是否可以使用完整的示例，因为我做了相同的事情，但它不起作用