angular - 我正在使用 angular6 并且在最初加载页面时未显示标签 ng-content 内的内容

Question

import { Component, OnInit } from '@angular/core';
import { Recipe } from './recipe.model';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css']
})
export class RecipesComponent implements OnInit {

  recipe : Recipe;

  show: boolean = false;
  constructor() { }

  ngOnInit() {
  }

  emittedRecipeItem(emittedRecipe : Recipe){
    this.recipe= emittedRecipe;
    this.show = true;
  }
}

<div class="row">
  <div class="col-md-5">
    <app-recipe-list (selectedRecipeItem)="emittedRecipeItem($event)"></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipe-detail *ngIf="show; else infotext" [recipeItemDetail]="recipe">
      <ng-template #infotext>
          Please select a recipe !
      </ng-template>
    </app-recipe-detail>
  </div>
</div>

我无法在我的 UI 页面中显示请选择食谱。

我使用了 ng-template 选项，但它没有按预期工作。

标签内的内容不显示

Answer 1

您ng-template的嵌套在您的自定义组件中，带有*ngIf.

结构应该是：

 <app-recipe-detail *ngIf="show; else infotext" [recipeItemDetail]="recipe">    
 </app-recipe-detail>

 <ng-template #infotext>
   Please select a recipe!
 </ng-template>

Answer 2

这是一个有效的堆栈闪电战

我app-recipe-list用一个button.