অভিভাবক শ্রেণি থেকে শিশু উপাদান উপাদান কল করুন - কৌণিক

Question

আমি একটি শিশু উপাদান তৈরি করেছি যার একটি পদ্ধতি রয়েছে যা আমি প্রার্থনা করতে চাই।

যখন আমি এই পদ্ধতিটি শুরু করি তখন এটি কেবল console.log()লাইনে গুলি চালায় , এটি testসম্পত্তি সেট করে না ??

নীচে আমার পরিবর্তনগুলির সাথে দ্রুত শুরু কৌণিক অ্যাপ্লিকেশনটি দেওয়া আছে।

মাতা

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

শিশু

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

আমি কীভাবে testসম্পত্তি সেট করতে পারি ?

Comments

সন্তানের উপাদানগুলির একটি পদ্ধতি কল করার

— দামান পাভলিকা

আপনি এই উত্তরটি এখানে চেক করতে পারেন: stackoverflow.com/a/53057589/6663458

— মুহাম্মদ মাব্রুক

Answer 1

আপনি @ViewChildআরও তথ্যের জন্য এই লিঙ্কটি পরীক্ষা করে ব্যবহার করে এটি করতে পারেন

টাইপ সিলেক্টর সহ

শিশু উপাদান

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

স্ট্রিং সিলেক্টরের সাথে

শিশু উপাদান

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

Comments

আমি আপনার পদ্ধতির অনুসরণ করেছিলাম, তবে আমি নির্দেশাবলী ব্যবহার করার সময় ত্রুটি পাচ্ছি: [চাইল্ডক্যাম্প], ত্রুটিটি বলেছে: নির্দেশিকাগুলি 'উপাদান' টাইপটিতে বিদ্যমান নেই। আমি এটি googled এবং সন্ধান পেয়েছি নির্দেশাবলী rc5 এ হ্রাস করা হয়েছে। সুতরাং কিভাবে এটি নতুন সংস্করণে পরিচালনা করবেন। সাহায্য করুন.

— ওয়ালিদ শাহজাইব

এই লিঙ্কটি কৌনিক.ও / গাইড / কম্পোনেন্ট-ইন্টেরাকেশন চেষ্টা করে দেখুন এবং নির্দেশাবলী লিঙ্কটিতে মন্তব্য করুন

— rashfmnb

একই ক্লাসের একাধিক বাচ্চা থাকলে কীভাবে এটি কাজ করবেন ??

— আনন্দহু অজাইকুমার

@rashfmnb "ঘোষণা প্রত্যাশিত"। যখন আমি @ ভিউচিল্ড ('চাইল্ড') চাইল্ড: চাইল্ডক্যাম্প; উপাদানটিতে লেখার চেষ্টা করব তখন একটি ত্রুটি আসবে। সাহায্য করুন! এবং আমি সেই নির্দেশে একইটি আমদানি করতে পারি না এটি আমাকে "ডাইরেক্টিভের মতো ত্রুটি দেয়: (টাইপফ এমপ্লয়িপ্রফিলি ... 'টাইপ' উপাদান 'এর প্যারামিটারে অর্পণযোগ্য নয় Ob অবজেক্ট আক্ষরিক কেবল পরিচিত বৈশিষ্ট্য নির্দিষ্ট করতে পারে, এবং' নির্দেশিকা 'না 'উপাদান'

— টাইপটিতে

এটি একটি সঠিক উত্তর, তবে এটি শক্তভাবে মিলিত উপাদানগুলি উত্পাদন করে । Inputবৈশিষ্ট্যগুলি ব্যবহার করা আরও ভাল প্যাটার্ন হ'ল : একটি পর্যবেক্ষণযোগ্য যা শিশু তার নিজস্ব অভ্যন্তরীণ ফাংশনটি কল করে প্রতিক্রিয়া জানায় । ব্যবহারকারীর 6779899 এর উত্তর দেখুন

— বোগদান ডি

Answer 2

এটা আমার জন্য কাজ করেছে! কৌণিক 2 এর জন্য, প্যারেন্ট উপাদানগুলিতে চাইল্ড উপাদান উপাদান কল করুন

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

---

Comments

এই লাইনে চাইল্ডভিএম কী: @ ভিউচিল্ড (চাইল্ড কম্পোনেন্ট) শিশু: চাইল্ডভিএম;

— ওয়ালিদ শাহজাইব

@WaleedShahzaib আমি বোঝানো ওপি মনে ChildComponentদ্বারাChildVM

— Ajeet শাহ

আমি ভেবেছিলাম এটি উপাদানটির একটি পৃথক উদাহরণ তৈরি করবে তবে এটি প্রকৃতপক্ষে সেই উপাদানটির বর্তমান অবস্থায় তার ভেরিয়েবলগুলির সাথে আপনার উদাহরণ থেকে ফাংশনটি কল করে! এই পদ্ধতিটি প্রথম উত্তরের চেয়ে ভাল!

— তাতসু

আমি সর্বদা "এই.চাইল্ড" এর অপরিবর্তিত মান পাচ্ছি

— আম্বুজ খান্না

'এই.চাইল্ড' অপরিশোধিত হওয়ার জন্য আমার অনুমান হ'ল ভিউচিল্ড কোনও কোনও দিকে ইঙ্গিত করছে যা টেমপ্লেটে বিদ্যমান নেই বা আপনি লাইফসাইकल, যেমন কনস্ট্রাক্টারে খুব তাড়াতাড়ি এটি অ্যাক্সেস করার চেষ্টা করছেন।

— টনি

Answer 3

আমি মনে করি সবচেয়ে সহজ উপায় সাবজেক্ট ব্যবহার করা। বেলো উদাহরণ কোডে প্রতিবার 'টেলচিল্ড' বলা হলে বাচ্চাকে জানানো হবে।

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

স্ট্যাকব্লিটজে কাজ করার নমুনা

Comments

এটি একটি মার্জিত সমাধান, তবে এটি সব ক্ষেত্রেই সঠিকভাবে কাজ করে না, সম্ভবত কৌণিক পরিবর্তন সনাক্তকরণ সাবস্ক্রাইব থেকে কাজ করছে না।

— আলেক্সি

এটি আমার ব্যবহারের ক্ষেত্রে সবচেয়ে ভাল সমাধান হিসাবে পাওয়া গেছে। একটি যাদুমন্ত্র মত কাজ করে. ধন্যবাদ!

— ওয়েস্টন 15

ঝরঝরে! সহজ ক্ষেত্রে, আপনি সাবজেক্ট / সাবস্ক্রাইব ওভারহেড এড়াতে পারবেন বাচ্চার কাছে কলব্যাক পদ্ধতি রয়েছে এমন একটি বিষয় পাস করে। উপরের মত, শিশু পিতা-মাতার কাছ থেকে সূচকগুলি পেতে কলব্যাকটিকে ওভাররাইড করে।

— sh

@ shr আপনি কলব্যাকের সাহায্যে কোনও বিষয় পাস করার জন্য আপনার সমাধানটি ভাগ করে নিতে চান কি?

— ইমাদ এল হট্টি

এটি একটি মার্জিত সমাধান, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, কেবলমাত্র 'rxjs' থেকে আমদানি method বিষয় like এর মতো আমদানি পদ্ধতি পরিবর্তন করুন;

— VIKAS KOHLI

Answer 4

কৌণিক - অভিভাবক উপাদানগুলির টেম্পলেটে চাইল্ড কম্পোনেন্টের পদ্ধতিটি কল করুন

আপনার কাছে প্যারেন্টকম্পোন্ট এবং চাইল্ডকমম্পোনেন্ট রয়েছে যা দেখতে এটির মতো দেখাচ্ছে।

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

যখন পরিবেশন করা হয় তখন এটির মতো দেখাচ্ছে:

যখন ব্যবহারকারী প্যারেন্টকম্পোনেন্টের ইনপুট উপাদানটিতে ফোকাস করে, আপনি চাইল্ডকমম্পোনেন্টের ডসোমথিং () পদ্ধতিতে কল করতে চান।

কেবল এটি করুন:

1. প্যারেন্ট.কম্পোনেন্টএইচটিএমএলে একটি অ্যাপ-চাইল্ড সিলেক্টরকে একটি ডিওএম ভেরিয়েবলের নাম দিন (# - হ্যাশট্যাগ সহ প্রিফিক্স) , এক্ষেত্রে আমরা এটিকে অ্যাপচিল্ড বলি।
2. ইনপুট উপাদানটির ফোকাস ইভেন্টে অভিব্যক্তি মান (আপনি যে পদ্ধতিতে কল করতে চান) অর্পণ করুন।

ফলাফল:

Comments

ঠিক আছে তবে আমরা এটি প্রোগ্রামের মাধ্যমে ts

— ক্যানব্যাক্স

উপাদানটির মধ্যে থেকে ব্যবহারের জন্য: @ViewChild('appChild', { static: false }) appChild: ElementRef<HTMLElement>;এবং পরে ব্যবহার করুনthis.appChild.doSomething()

— গিল এপশেটেন

Answer 5

ব্যবহারকারীর 6779899 এর উত্তর ঝরঝরে এবং আরও জেনেরিক তবে ইমাদ এল হিটির অনুরোধের ভিত্তিতে একটি হালকা ওজনের সমাধান এখানে প্রস্তাব করা হয়েছে। যখন কোনও সন্তানের উপাদান কেবলমাত্র একজন পিতামাতার সাথে শক্তভাবে সংযুক্ত থাকে তখন এটি ব্যবহার করা যেতে পারে।

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

Answer 6

নিম্নলিখিত উদাহরণ বিবেচনা করুন,

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

@ ভিউচিল্ড সম্পর্কে আরও পড়ুন এখানে।

Answer 7

আমার একটি সঠিক পরিস্থিতি ছিল যেখানে প্যারেন্ট-উপাদানটির Selectএকটি ফর্ম এবং জমা দেওয়ার সময় উপাদান ছিল , আমাকে নির্বাচিত উপাদান থেকে নির্বাচিত মান অনুযায়ী প্রাসঙ্গিক শিশু-উপাদানটির পদ্ধতিটি কল করতে হবে।

Parent.HTML:

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

Parent.TS:

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

Child.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(){ }
}

আশাকরি এটা সাহায্য করবে.