Угловой 2: Как установить значение по умолчанию поля от родительского компонента обратно к дочернему компоненту?

Question

У меня следующий сценарий: childComponent - это угловое переключение слайдов материала, которое используется в разных частях моего приложения. Он используется в parentComponent1 и parentComponent2. В parentComponent1 я хочу установить значение по умолчанию для ползункового переключателя равным true, но в parentComponent2 я хочу, чтобы оно было false. Как мне установить значение по умолчанию переключателя слайда в parentComponents?

Я попробовал обычный рецепт @Input, описанный в угловых документах (https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding),, но безуспешно.

Фрагмент моего дочернего компонента:

<mat-slide-toggle *ngIf="toggleFilterText"
      class="example-margin"
      [color]="color"
      [(ngModel)]="checked"
      [disabled]="disabled"
      (change)="onToggleFilterChange(checked)">
      {{toggleFilterText}}

и ребенок ц

@Input()
checked: boolean;

Что мне делать в моих родительских файлах ts, чтобы установить значение по умолчанию? Благодарю.

Answer 1

Это зависит от того, как настроены ваши родительские компоненты и являются ли они одним и тем же компонентом.

Если это разные компоненты:

parent-component-1.ts:

public class Parent1Component {
    public checked: boolean;
    constructor() {
        checked = true;
    }
}

parent-component-2.ts:

public class Parent2Component {
    public checked: boolean;
    constructor() {
        checked = false;
    }
}

Если они представляют собой один и тот же компонент, вам необходимо выполнить что-то вроде следующего:

parent-component.ts:

public class ParentComponent {
    @Input()
    checked: boolean;
}

HTML:

<parent-component [checked]="true"></parent-component><!-- First -->
<parent-component [checked]="false"></parent-component><!-- Second -->

Answer 2

Я предполагаю, что вам нужно установить значение 'флажок'. Добавьте входной параметр в ваш HTML-тег и установите для него желаемое значение

<mat-slide-toggle *ngIf="toggleFilterText"
      [checked] = "false"
      class="example-margin"
      [color]="color"
      [(ngModel)]="checked"
      [disabled]="disabled"
      (change)="onToggleFilterChange(checked)" / >