如何將值傳遞給 ng-container ngTemplateOutlet

Question

我正在掌握 angular 指令，我想將一個值傳遞給我的組件我的代碼：

我的組件

`
@Component({
  selector: 'app-my-one',
  template: `
    <ng-container
      *ngTemplateOutlet="layoutTemplate; context: { name: name }"
    ></ng-container>
  `
})
export class MyOneComponent {
  @ContentChild(TemplateRef, { static: true })
  @Input()
  layoutTemplate: TemplateRef<any>;
}
`

並在 app.component.html

`@Component({
  selector: 'app-root',
  template: `
    <app-my-one>
      <ng-template let-name="current">
        <span>Ahoj {{ name }}!</span>
      </ng-template>
    </app-my-one>
  `
})
export class AppComponent {
  current = 'Svet';
}`

但我只能看到“Ahoj”

你能幫我嗎？

Answer 1

通過將上下文對象傳遞給MyOneComponent來嘗試這種方式

MyOneComponent 模板

<ng-container
  *ngTemplateOutlet="layoutTemplate;context:myContext"
></ng-container>

應用組件模板

<app-my-one [myContext]="current" >

  <ng-template let-name="name">
    <span>Ahoj {{ name }}!</span>
  </ng-template>

</app-my-one>

演示🔥🔥

文檔 : NgTemplateOutlet