Angular 8 - копировать выбранное значение в другой компонент

Question

Я учусь Angular, мне нужно передать значение выбора в «p» в другом компоненте. Поэтому, когда значение выбора изменяется, элемент «p» также изменяется.

app.component. html

<navbar></navbar>
<todo-list-cards></todo-list-cards>
<test></test>
<router-outlet></router-outlet>

todo.component. html

<div class="contenedorTareas">
    <div class="card text-white bg-primary mb-3" id="cards" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <select name="selector" id="selector">
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </div>
    <div class="cards">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">

            </div>

        </div>
    </div>

</div>

test.component. html

<p><!-- Here the value of the <select> should be--></p>

Answer 1

test.component.ts (дочерний компонент)

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',

})

export Class TestComponent {

@Input() selectedOption: string;

}

Теперь используйте этот вход в файле html.

test.component . html

<p>{{selectedOption}}</p>

Когда вы включаете ваш тестовый компонент в родительский компонент, например todo.component. html, вы можете передать input selectedOption от родительского к дочернему как [input] в html tag

<div class="contenedorTareas">
    <div class="card text-white bg-primary mb-3" id="cards" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <select [(ngModel)]="optionSelected" name="selector" id="selector">
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </div>
    </div>
    <div class="cards">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">

            </div>

        </div>
    </div>

</div>

  <app-test [selectedOption]="optionSelected"></app-test>

todo.component.ts родительский компонент

export class TodoComponent {

optionSelected: string;
}

Answer 2

Лучше всего, на мой взгляд, связать выбранное значение и содержание абзаца с помощью сервиса. Попробуйте добавить todo.service.ts со следующим:

private selected: string;
public get selectedValue() {
    return this.selected;
  }
public setSelectedValue(value: string){
    this.selected = value;
}

Затем в todo обновите значение в службе, а в тесте просто получите его в

:

<p>{{todoService.SelectedValue}}</p>