Gọi phương thức thành phần con từ lớp cha - Angular

Tôi đã tạo một thành phần con có một phương thức mà tôi muốn gọi.

Khi tôi gọi phương thức này, nó chỉ kích hoạt console.log()dòng, nó sẽ không thiết lập thuộc testtính ??

Dưới đây là ứng dụng Angular khởi động nhanh với các thay đổi của tôi.

Cha mẹ

import { Component } from '@angular/core';
import { NotifyComponent }  from './notify.component';

@Component({
    selector: 'my-app',
    template:
    `
    <button (click)="submit()">Call Child Component Method</button>
    `
})
export class AppComponent {
    private notify: NotifyComponent;

    constructor() { 
      this.notify = new NotifyComponent();
    }

    submit(): void {
        // execute child component method
        notify.callMethod();
    }
}

Đứa trẻ

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

@Component({
    selector: 'notify',
    template: '<h3>Notify {{test}}</h3>'
})
export class NotifyComponent implements OnInit {
   test:string; 
   constructor() { }

    ngOnInit() { }

    callMethod(): void {
        console.log('successfully executed.');
        this.test = 'Me';
    }
}

Tôi cũng có thể đặt thuộc testtính như thế nào?

Bạn có thể làm điều này bằng cách sử dụng @ViewChildđể biết thêm thông tin, hãy kiểm tra liên kết này

Với bộ chọn loại

thành phần con

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}

thành phần mẹ

@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {

  @ViewChild(ChildCmp) child:ChildCmp;

  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Với bộ chọn chuỗi

thành phần con

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}

thành phần mẹ

@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();
  }
}

Điều này làm việc cho tôi! Đối với Angular 2, gọi phương thức thành phần con trong thành phần mẹ

Parent.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ChildComponent } from '../child/child'; 
    @Component({ 
               selector: 'parent-app', 
               template: `<child-cmp></child-cmp>` 
              }) 
    export class parentComponent implements OnInit{ 
        @ViewChild(ChildComponent ) child: ChildComponent ; 

        ngOnInit() { 
           this.child.ChildTestCmp(); } 
}

Child.component.ts

import { Component } from '@angular/core';
@Component({ 
  selector: 'child-cmp', 
  template: `<h2> Show Child Component</h2><br/><p> {{test }}</p> ` 
})
export class ChildComponent {
  test: string;
  ChildTestCmp() 
  { 
    this.test = "I am child component!"; 
  }
 }

Tôi nghĩ cách dễ dàng nhất là sử dụng Chủ đề. Trong mã ví dụ dưới đây, đứa trẻ sẽ được thông báo mỗi khi 'tellChild' được gọi.

Parent.component.ts

import {Subject} from 'rxjs/Subject';
...
export class ParentComp {
    changingValue: Subject<boolean> = new Subject();
    tellChild(){
    this.changingValue.next(true);
  }
}

Parent.component.html

<my-comp [changing]="changingValue"></my-comp>

Child.component.ts

...
export class ChildComp implements OnInit{
@Input() changing: Subject<boolean>;
ngOnInit(){
  this.changing.subscribe(v => { 
     console.log('value is changing', v);
  });
}

Làm việc mẫu trên Stackblitz

Angular - Gọi phương thức của thành phần con trong mẫu của thành phần mẹ

Bạn có ParentComponent và ChildComponent trông như thế này.

parent.component.html

parent.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor() {
  }
}

child.component.html

<p>
  This is child
</p>

child.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor() {
  }

  doSomething() {
    console.log('do something');
  }
}

Khi giao bóng, nó trông như thế này:

Khi người dùng tập trung vào phần tử đầu vào của ParentComponent, bạn muốn gọi phương thức doSomething () của ChildComponent.

Đơn giản chỉ cần làm điều này:

1. Cung cấp cho bộ chọn app-con trong parent.component.html một tên biến DOM (tiền tố bằng # - hashtag) , trong trường hợp này chúng tôi gọi nó là appChild.
2. Gán giá trị biểu thức (của phương thức bạn muốn gọi) cho sự kiện trọng tâm của phần tử đầu vào.

Kết quả:

Câu trả lời của user6779899 là gọn gàng và chung chung hơn Tuy nhiên, dựa trên yêu cầu của Imad El Hitti, một giải pháp trọng lượng nhẹ được đề xuất ở đây. Điều này có thể được sử dụng khi một thành phần con chỉ được kết nối chặt chẽ với một thành phần gốc.

Parent.component.ts

export class Notifier {
    valueChanged: (data: number) => void = (d: number) => { };
}

export class Parent {
    notifyObj = new Notifier();
    tellChild(newValue: number) {
        this.notifyObj.valueChanged(newValue); // inform child
    }
}

Parent.component.html

<my-child-comp [notify]="notifyObj"></my-child-comp>

Child.component.ts

export class ChildComp implements OnInit{
    @Input() notify = new Notifier(); // create object to satisfy typescript
    ngOnInit(){
      this.notify.valueChanged = (d: number) => {
            console.log(`Parent has notified changes to ${d}`);
            // do something with the new value 
        };
    }
 }

Hãy xem xét ví dụ sau,

    import import { AfterViewInit, ViewChild } from '@angular/core';
    import { Component } from '@angular/core';
    import { CountdownTimerComponent }  from './countdown-timer.component';
    @Component({
        selector: 'app-countdown-parent-vc',
        templateUrl: 'app-countdown-parent-vc.html',
        styleUrl: [app-countdown-parent-vc.css]
    export class CreateCategoryComponent implements OnInit {
         @ViewChild(CountdownTimerComponent, {static: false})
         private timerComponent: CountdownTimerComponent;
         ngAfterViewInit() {
             this.timerComponent.startTimer();
         }

         submitNewCategory(){
            this.ngAfterViewInit();     
         }

Đọc thêm về @ViewChild tại đây.

Tôi đã gặp tình huống chính xác trong đó Thành phần gốc có một Selectphần tử trong một biểu mẫu và khi gửi, tôi cần gọi phương thức của Thành phần con có liên quan theo giá trị đã chọn từ phần tử được chọn.

Parent.HTML:

<form (ngSubmit)='selX' [formGroup]="xSelForm">
    <select formControlName="xSelector">
      ...
    </select>
<button type="submit">Submit</button>
</form>
<child [selectedX]="selectedX"></child>

Phụ huynh.TS:

selX(){
  this.selectedX = this.xSelForm.value['xSelector'];
}

Con.TS:

export class ChildComponent implements OnChanges {
  @Input() public selectedX;

  //ngOnChanges will execute if there is a change in the value of selectedX which has been passed to child as an @Input.

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    this.childFunction();
  }
  childFunction(){ }
}

Hi vọng điêu nay co ich.