使用mat-button-toggle-group进行内容投影

Question

我想实现以下目标:我有一个包装器组件，它有一个垫子-按钮-切换组。在这个切换组中应该有按钮。但是我想控制哪些按钮是从外部通过内容投影到包装器组件。当然，我可以创建ngIf ` s，但这需要一点灵活性。

所以我希望能够这样做:

任何组件:

<action-bar>
<button-one></button-one>
<button-two></button-two>
</action-bar>

另一个组件:

<action-bar>
<button-two></button-two>
<button-three></button-three>
</action-bar>

按钮<button-one>, <button-two>…将会是包含像这样的真实<mat-button-toggle>的组件

<mat-button-toggle value="bold">Bold</mat-button-toggle>

我创建了一个显示问题的stackblitz:https://stackblitz.com/edit/angular-vryx72?file=src/app/bold-button/bold-button.component.html这里粗体按钮是通过内容投影添加到toggle-group的但是当我点击它时，它不会改变toggle-group

的值有人知道如何实现这一点吗?

Answer 1

因为内容投影打破了mat-button-toggle-group和mat-button-toggle之间的联系，我们需要导出并传递matButtonToggleGroup组件。这个有点脆，但应该能得到你想要的。我更新了你的stackblitz，但我也分叉了我自己的，你应该可以在这里查看:https://stackblitz.com/edit/angular-vryx72-m6u2f1?file=src%2Fapp%2Fbutton-toggle-overview-example.ts

下面的代码需要将内容投影到mat-button-toggle-group中，并让控件模型使用投影的内容。

// action-bar.component.ts
@Component({
selector: "action-bar",
template: `
<mat-button-toggle-group 
name="toggleButtonGroup"
#matButtonToggleGroup="matButtonToggleGroup">
<ng-content></ng-content>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
`,
// export ActionBar component so we can access the `buttonToggleGroup` viewChild property
exportAs: "actionBar"
})
export class ButtonToggleOverviewExample {
@ViewChild("matButtonToggleGroup", { static: true }) 
buttonToggleGroup: MatButtonToggleGroup;
}

// button-two.component.ts
@Component({
selector: "button-two",
template: `
<mat-button-toggle value="bold" #buttonToggle="matButtonToggle">
bold
</mat-button-toggle>
`
})
export class ButtonTwoComponent implements OnInit {
@Input() buttonToggleGroup: MatButtonToggleGroup;
@ViewChild("buttonToggle", { static: true }) 
matButtonToggle: MatButtonToggle;
// Assign the parent matButtonToggleGroup to the viewChild matButtonToggle property. This links the projected matButtonToggle back to the parent button group.
ngOnInit() {
this.matButtonToggle.buttonToggleGroup = this.matButtonGroup;
}
}

// app.html
<action-bar #actionBar="actionBar">
<button-two [buttonToggleGroup]="actionBar.buttonToggleGroup"></button-two>
<button-three [buttonToggleGroup]="actionBar.buttonToggleGroup"></button-three>
</action-bar>