角度2：如何将字段的默认值从父组件设置回子组件？

Question

I have the following scenario: childComponent is an angular material slide toggle that is used in different parts of my application. It is used in parentComponent1 and parentComponent2. In parentComponent1 I want to set the default value of the slide toggle to be true but in parentComponent2 I want it to be false . How do I go about setting the default value of the slide toggle in the parentComponents?

I've tried the usual @Input recipe outlined in the angular docs ( https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding ), but no success.

Snippet of my child component:

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

and child ts

@Input()
checked: boolean;

What do I do in my parent ts files to set the default value? Thanks.

Answer 1

I am assuming you need the value of 'checked' to be set. Add the input parameter to your HTML tag and set it to the desired value

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

Answer 2

It depends on how your parent components are set-up and if they are the same component.

If they are different components:

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;
    }
}

If they are the same component, you would need to do something like the following:

parent-component.ts :

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

HTML:

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