Question

我需要从父组件html调用子组件函数。

类似的东西：

子组件：

export class childComponent {
  private value: boolean;

  @input()
  setValue(inputVal){
    this.value = inputVal;
  }
}

父组件：

<childComponent  [setValue] = "true"></childComponent>

任何想法怎么做？

Answer 1

您可以使用查看子项

执行此操作

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

    @Component({
      selector: 'child-cmp',
      template: '<p>child</p>'
    })
    class ChildCmp {
      doSomething() {}
    }
    @Component({
      selector: 'some-cmp',
      template: '<child-cmp></child-cmp>',
      directives: [ChildCmp]
    })
    class SomeCmp {
      @ViewChild(ChildCmp) child:ChildCmp;
      ngAfterViewInit() {
        // child is set
        this.child.doSomething();
      }
    }

或者您也可以使用字符串

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 @Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}
@Component({
  selector: 'some-cmp',
  template: '<child-cmp #child></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {
  @ViewChild('child') child:ChildCmp;
  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Answer 2

您无法使用@input绑定方法。您可以使用@ViewChild

执行此操作

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class childComponent {
   value : anyl
   setValue(inputVal){
     this.value = inputVal;
  }
}

然后在父组件

中

class SomeCmp {
  @ViewChild(ChildCmp) child:ChildCmp;
  ngAfterViewInit() {
    this.child.setValue(yourval);
  }
}

angular 4 - 来自父组件html

2 个答案: