Angular5将子组件中的HTML内容注入另一个组件答案

【问题标题】：Angular5 inject HTML content from child component into another componentAngular5将子组件中的HTML内容注入另一个组件
【发布时间】：2018-10-04 07:49:01
【问题描述】：

不确定这是否可行，但我有一个可重用的标题部分，它从路由数据属性中获取数据。这会在标题中显示标题和描述。

我的问题是，根据我所在的路线，如何将不同的 HTML 内容注入到标题中？我知道您可以使用 ng-content ，但这需要将标题部分放在每个组件中。标头位于主路由器插座之外

这是标头相对于路由器插座的位置

<app-navbar></app-navbar>
<app-header></app-header>
<app-alert></app-alert>
<router-outlet #route="outlet"></router-outlet>

这是标题

<div class="title">
  <div class="title-text">
    <h1>{{ data?.title }}</h1>
    <p>{{ data?.description }}</p>
  </div>
  <ng-content>Here is where I would like to inject HTML from child component</ng-content
</div>

这就是我想注入的内容

  <label class="select" for="product-selection">Products</label>
  <select class="select" id="product-selection" placeholder="Product" [(ngModel)]="selectedProduct" (change)="onProductChanged()">
    <option *ngFor="let product of products" [value]="product.id">{{ product.name }}</option>
  </select>

【问题讨论】：

你试试@input和@outpout，可以把数据当作事件处理

标签： html angular typescript angular-components

【解决方案1】：

如果标头位于主路由器出口之外，那么您必须使用在服务中创建一个全局变量并使用 *ngIF 指令您可以显示所需的标头。

实施步骤： 1）从路由器获取值并保存在服务全局变量中。 2) 在带有 *ngIf 的标头组件中使用该变量并显示标头值。

【讨论】：