ContentChild裡的Parent是否可使用多個<ng-content>

General
1

想請問一下如果我目前有兩個Component
父Component有一個 可以嵌入子Component的內容

如果我想要用多個 加上 select 來做多個嵌入 是否可行呢

目前 是可以嵌入內容的，可是加上 就會無法
不知是我寫錯還是不能這樣用

Parent

import { Component, OnInit, ContentChild } from "@angular/core";
import { ChildComponent } from "../child/child.component";

@Component({
  selector: "app-parent",
  templateUrl: "./parent.component.html",
  template: `
  <p *ngIf="childCmp">
    {{childCmp.name}}
  </p>
  <ng-content select='.body'></ng-content>

  `,
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent {
  @ContentChild("target") childCmp: ChildComponent;

  ngAfterContentInit() {
    console.dir(this.childCmp);
  }
}

ChildComponent

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-child",
  template: `
  <p class='body'>
    child body!
  </p>
  <p class='foot'>
    child foot!
  </p>
  `,
  styleUrls: ["./child.component.css"]
})
export class ChildComponent {
  public name: string = "get child name";
}
2

關於select你可能有點誤會，

我想你的template是這樣擺的對吧，

<app-parent>
   <app-child></app-child>
</app-parent>

關於ng-content他是要在當下template能select到的任何select方法，並不是在child裡面來做select，舉例來說，

<app-parent>
   <app-child class="body"></app-child>
   <span #target> Hi, I am content child </span>
</app-parent>

那顯示的結果會是parent裡面的內容

 <p>
     get child name
 </p>
 <!-- 我是來自content的child -->
 <p class='body'>
   child body!
 </p>
 <p class='foot'>
   child foot!
 </p>

至於你parent裡面的ContentChild的使用並不是這樣給的，是要給一個template variable才有辦法使用
詳情請看：

希望有幫助到你

1個讚
3

感謝

看來我是誤解用法了

1個讚