父组件调用子组件。显示子组件的label。怎么实现？HTML里怎么调用的

要在Angular中让父组件调用子组件并显示子组件的`label`，你可以通过双向数据绑定（`[(ngModel)]`）或者事件驱动的方式实现。这里我将提供一种常见的做法，即使用属性绑定和事件发射。

首先，在子组件（例如：`sub-input-input.component.html`）中，假设有一个名为`label`的属性：

<!-- sub-input-input.component.html -->
<div>
  <label>{{ label }}</label>
  <!-- ...其他输入字段... -->
</div>

然后在父组件（比如：`user-page.component.html`），你可以在需要显示子组件`label`的地方创建一个`ng-container`，并在其中使用`ngTemplateOutlet`插入子组件的模板：

<!-- user-page.component.html -->
<ng-template #dynamicLabel let-label="label">
  <sub-input-input [label]="label"></sub-input-input>
</ng-template>

<button (click)="showLabel('初始标签内容')">显示子组件label</button>
<div *ngIf="displayLabelTemplate; else defaultContent">
  <!-- 显示动态标签 -->
  <ng-container [ngTemplateOutlet]="dynamicLabel" [ngOutletContext]="{ label: '动态标签内容' }"></ng-container>
</div>
<ng-template #defaultContent>
  默认内容区域
</ng-template>

当父组件的`showLabel`方法被调用时，你可以传入你想显示的`label`值：

// user-page.component.ts
import { Component, TemplateRef, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-user-page',
  templateUrl: './user-page.component.html',
  styleUrls: ['./user-page.component.css']
})
export class UserPageComponent {
  private dynamicLabelTemplate: TemplateRef<any>;
  displayLabelTemplate = false;

  showLabel(label: string) {
    this.displayLabelTemplate = true;
    this.dynamicLabelTemplate = this.dynamicLabel; // 保存模板引用
    // 或者直接用子组件的模板Ref：
    // const dynamicLabelTemplate = this DynamicLabelTemplateRef as TemplateRef<any>;
    // this.vcRef.insert(``, dynamicLabelTemplate);
  }

  constructor(private vcr: ViewContainerRef) {
    // 如果你的子组件已经有了一个名为DynamicLabelTemplateRef的模板Ref变量，你可以在这里注入并使用它
  }
}

通过这种方式，点击“显示子组件label”的按钮时，父组件就会动态地显示子组件的`label`。`ngTemplateOutlet`结合了`ngFor`和`ngIf`的功能，允许你动态地插入或替换模板内容。