Angular 2：如何将parent组件的字段默认值设置回child组件？

Question

我有以下情况：child组件是一个 angular material 滑动开关，用于我的应用程序的不同部分。它用于 parentComponent1 和 parentComponent2。在 parentComponent1 中，我想将滑动切换的默认值设置为 true，但在 parentComponent2 中，我希望将其设置为 false。如何在 parent 组件中设置滑动开关的默认值？

我尝试了 angular 文档 (https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding) 中概述的常用 @Input 方法，但没有成功。

我的 child 组件的片段：

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

和child ts

@Input()
checked: boolean;

如何在我的 parent ts 文件中设置默认值？谢谢。

Answer 1

我假设您需要设置 'checked' 的值。将输入参数添加到您的 HTML 标签并将其设置为所需的值

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

Answer 2

这取决于您的父组件的设置方式以及它们是否是同一组件。

如果它们是不同的组件：

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

Angular 2：如何将parent组件的字段默认值设置回child组件？

Angular 2: How to set default value of field from parent component back to child component?

javascript

components

angular2-forms

angular