Question

我在从父级重置子级组件中的字段方面有些困惑。我在子组件中有一个字段，当在父组件中调用函数时，子字段应重置。子组件：

    @Component({
    selector: 'my-app',
    template: `
        <input type="text" placeholder="Type your name..." [formControl]="Name"/>

        `})
    export class ChildComponent {
      Name = new FormControl('');
    }

父组件：

@Component({
    selector: 'my-parent-app',
    template: `

        `})
    export class ParentComponent {
      resetName(){
      // Here I need to reset my child component field..
      }
    }

如果有人有主意，请您帮我理解。.

Answer 1

如果通过模板中的子选择器访问子，则可以设置@ViewChild以获得对子类的访问权限，下面的示例如下所示，使用其子类作为类型。确保导入@Viewchild和ChildComponent。

@Component({
    selector: 'my-parent-app',
    template: `
         <my-app #component-child></my-app>
        `})
    export class ParentComponent {

      @ViewChild('component-child') childComponent: ChildComponent;

      public resetName(): void
      {
        console.log(this.childComponent) // should see everything within the class.
        this.childComponent.name.reset(); // should reset the form in child component
      }
    }

如果遇到任何麻烦，请放弃评论。

如何从父组件重置子组件中的字段-角度

1 个答案: