Angular 9 - 如何将文本数据数组从父组件传递到多层子组件？

Question

我是 Angular 9 的新手，我正在尝试制作一个表单，其中包含 3 个不同的问题，每个问题都有一系列具有不同李克特量表文本的单选按钮。比如：

1. "How are you feeling"

Bad - Kind of Bad - Neutral - Somewhat Okay - Good

2. "How worried are you?"

Very worried - somewhat worried - neutral - not really worried - not worried at all

...

目前，我有这样的事情：

radio-button.component.html

<div class="btn-group btn-group-toggle" data-toggle="buttons" [(ngModel)]="radioText">
    <label class="btn btn-secondary white-out">
        <input type="radio" name="options" id="option1" autocomplete="off" /> {{ radioText[0] }}
    </label>
    <label class="btn btn-secondary white-out">
        <input type="radio" name="options" id="option2" autocomplete="off" /> {{ radioText[1] }}
    </label>
    <label class="btn btn-secondary white-out">
        <input type="radio" name="options" id="option3" autocomplete="off" /> {{ radioText[2] }}
    </label>
    <label class="btn btn-secondary white-out">
        <input type="radio" name="options" id="option3" autocomplete="off" /> {{ radioText[3] }}
    </label>
    <label class="btn btn-secondary white-out">
        <input type="radio" name="options" id="option3" autocomplete="off" /> {{ radioText[4] }}
    </label>
</div>

radio-button.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'form-radio-buttons',
    templateUrl: './radio-button.component.html',
})
export class RadioButtonComponent {
    @Input() radioText = ['Bad', 'Kind of Bad', 'Neutral', 'Somewhat Okay', 'Good'];
}

而且这似乎工作得很好。

现在，我如何将 radioText 提取到另一个级别并让另一个父组件根据问题传递它？

app-form.component.ts

@Component({
    selector: 'app-form',
    templateUrl: './app-form.component.html',
})
export class FormComponent {
    radioButtonText = [
        ['Bad', 'Kind of Bad', 'Neutral', 'Somewhat Okay', 'Good'],
        ['Very Worried', 'Somewhat worried', 'Neutral', 'Not really worried', 'Not worried at all'],
        ...
    ];
}

app-form.component.html

<form>
    <div>
        <div>How are you feeling</div>
        <form-radio-buttons></form-radio-buttons> <!-- How do I pass the radioButtonText for each set of radio buttons down here? -->
    </div>

    <div>
        <div>How worried are you</div>
        <form-radio-buttons></form-radio-buttons>
    </div>
</form>

Answer 1

您已经将 radioText 定义为 @Input，因此在 app-form.component.html 中，您可以使用如下输入绑定将值传递给组件，

<form-radio-buttons [radioText]="radioButtonText[0]"></form-radio-buttons>

你可以参考， http://plnkr.co/edit/QORNBHQWnDx6slG6?preview