如何用子数据填充父模板(Angular 11)

Question

所以我有两个Angular组件，一个父组件&一个孩子。我想做以下事情:

1. 在引用的父组件中定义一个ng-template子函数/变量
2. 将该模板作为参数传递给子组件，和
3. 让子组件显示这个

应用程序。组件(父)

import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {}

<reusable-component [customTemplate]="parentTemplate"></reusable-component>
<ng-template #parentTemplate>
<p>Current color is {{currentColor}}</p>
<button (click)="changeColorToRed()">
CHANGE BACKGROUND COLOR TO RED
</button>
<button (click)="changeColorToGreen()">
CHANGE BACKGROUND COLOR TO GREEN
</button>
</ng-template>

子组件(可重用组件)

import { Component, Input, OnInit, TemplateRef } from "@angular/core";
@Component({
selector: "reusable-component",
templateUrl: "./reusable-component.component.html",
styleUrls: ["./reusable-component.component.css"]
})
export class ReusableComponentComponent implements OnInit {
@Input() public customTemplate!: TemplateRef<HTMLElement>;
currentColor = "white";
constructor() {}
ngOnInit() {}
changeColorToRed() {
const red = "#FF0000";
document.body.style.background = red;
this.currentColor = "red";
}
changeColorToGreen() {
const green = "#00FF00";
document.body.style.background = green;
this.currentColor = "green";
}
}

<ng-container [ngTemplateOutlet]="customTemplate || defaultTemplate">
</ng-container>
<ng-template #defaultTemplate>
Hello, zuko here!
</ng-template>

如何为父模板提供该子组件的函数/实例变量?

这是整个项目的Stackblitz

Answer 1

大多数事情都很好。用于传递数据…

让我们首先开始定义要在子组件

中传递的数据子组件TS

currentColor = "white";
constructor() {}
ngOnInit() {}
changeColorToRed() {
const red = "#FF0000";
document.body.style.background = red;
this.currentColor = "red";
}
changeColorToGreen() {
const green = "#00FF00";
document.body.style.background = green;
this.currentColor = "green";
}
data = { currentColor: this.currentColor, changeColorToRed: this.changeColorToRed, changeColorToGreen: this.changeColorToGreen };

现在，我们将包含数据的上下文传递给模板。使用*ngTemplateOutlet代替[ngTemplateOutlet]来支持链接

子组件html

<ng-container *ngTemplateOutlet="customTemplate || defaultTemplate; context: data">
</ng-container>

现在，我们使用let-属性接收父

中的参数父组件html

<reusable-component [customTemplate]="parentTemplate"></reusable-component>
<ng-template #parentTemplate let-currentColor="currentColor" let-changeColorToRed="changeColorToRed" let-changeColorToGreen="changeColorToGreen">
<p>Current color is {{currentColor}}</p>
<button (click)="changeColorToRed()">
CHANGE BACKGROUND COLOR TO RED
</button>
<button (click)="changeColorToGreen()">
CHANGE BACKGROUND COLOR TO GREEN
</button>
</ng-template>

Stackblitz