কৌনিক 2 তে কোনও উপাদানটির পুনরায় রেন্ডারিংকে কীভাবে বাধ্য করা যায়?

Question

কৌনিক 2 তে কোনও উপাদানটির পুনরায় রেন্ডারিংকে কীভাবে বাধ্য করা যায়? ডিবাগ উদ্দেশ্যে Redux এর সাথে কাজ করার জন্য আমি কোনও উপাদানটিকে তার দর্শনটিকে পুনরায় রেন্ডার করতে বাধ্য করতে চাই, এটি কি সম্ভব?

Comments

"পুনরায় রেন্ডারিং" বলতে আপনার অর্থ কী? বাইন্ডিং আপডেট করবেন?

— গন্টার জ্যাচবাউয়ার

কেবলমাত্র একটি তাত্পর্যপূর্ণ প্রশ্ন কেন আপনাকে পুনরায় রেন্ডারিং করতে বাধ্য করা দরকার?

— টুং লে

ম্যানুয়ালি ট্রিগারিং অ্যাঙ্গুলার 2 পরিবর্তন সনাক্তকরণের

— ব্লকপয়েন্ট 3 ই

Answer 1

পরিবর্তন সনাক্তকরণের পরে রেন্ডারিং হয়। পরিবর্তন সনাক্তকরণকে বাধ্য করার জন্য, যাতে পরিবর্তিত পরিবর্তিত উপাদান উপাদানগুলি ডিওমে প্রচারিত হয় (এবং তারপরে ব্রাউজারটি সেই পরিবর্তনগুলিতে এই পরিবর্তনগুলি রেন্ডার করবে), এখানে কিছু বিকল্প রয়েছে:

• অ্যাপ্লিকেশন শ্যাফ.টিক () - কৌণিক 1 এর সমান $rootScope.$digest()- যেমন, সম্পূর্ণ উপাদান গাছটি পরীক্ষা করুন
• এনজিজোন.আরুন (কলব্যাক) - এর মতো$rootScope.$apply(callback) - যেমন, কৌণিক 2 জোনের অভ্যন্তরে কলব্যাক ফাংশনটি মূল্যায়ন করুন। আমি মনে করি, তবে আমি নিশ্চিত নই, এটি কলব্যাক ফাংশনটি সম্পাদন করার পরে সম্পূর্ণ উপাদান গাছ পরীক্ষা করে শেষ করবে।
• চেঞ্জডেক্টরআরফ.ডিটেক্টট চেঞ্জস () - এর অনুরূপ $scope.$digest()- যেমন কেবল কেবল এই উপাদান এবং এর শিশুদের পরীক্ষা করুন

আপনার দ্বারা আমদানি করা এবং তারপর উদ্বুদ্ধ করতে হবে ApplicationRef, NgZoneঅথবা ChangeDetectorRefআপনার উপাদান মধ্যে।

আপনার নির্দিষ্ট দৃশ্যের জন্য, আমি কেবলমাত্র একটি একক উপাদান পরিবর্তিত হলে আমি শেষ বিকল্পটি সুপারিশ করব।

Comments

Angular2 এর চূড়ান্ত সংস্করণের জন্য চেঞ্জডেেক্টরআরফের কোনও কার্যকরী কোড? আমি এখন এমন পরিস্থিতির মুখোমুখি হয়েছি যেখানে কোনও নতুন ব্যবহারকারী তৈরি করার জন্য কোনও পোস্টের পোস্টের অনুরোধের পরে ভিউ আপডেট করা হয়নি এবং তারপরে সাফল্যের সাথে নতুন অবজেক্টটিকে বিদ্যমান পুরানো ব্যবহারকারী তালিকার দিকে ঠেলে দেওয়া হয়েছে (দর্শনে পুনরাবৃত্তি করার জন্য ব্যবহৃত)। বেশ আশ্চর্য যে this is the first time I am facing an update not working in ng2। পরিবর্তন সনাক্তকরণ কৌশলটি ডিফল্ট তাই আমি জানি যে আমি পরিবর্তন সনাক্তকরণ কৌশলটি নিয়ে গণ্ডগোল করিনি।

— গ্যারি

@ গ্যারি, আপনার একটি নতুন প্রশ্ন পোস্ট করা উচিত এবং আপনার উপাদান এবং আপনার পরিষেবা কোড অন্তর্ভুক্ত করা উচিত (আদর্শভাবে, সমস্যাটি দেখানোর জন্য একটি ন্যূনতম প্লঙ্কার অন্তর্ভুক্ত করুন)। একটি সাধারণ সমস্যা যা আমি দেখেছি তা হল thisপোস্টের কলব্যাকে সঠিক প্রসঙ্গটি ব্যবহার করা নয় ।

— রাজকক

আপনি কি জানেন যে আমি যখনই কোনও পরিবর্তন সম্পাদন করি তখন আমি ম্যানুয়ালি পাইপগুলি ট্রিগার করতে পারি? আমি পরিবর্তন সনাক্তকরণটি ট্রিগার করার চেষ্টা করেছি কিন্তু পাইপ আপডেট হয় না ... আমি pure:falseপাইপ দিয়ে চেষ্টাও করেছি । এটি কাজ করে তবে এটি আমার ব্যবহারের ক্ষেত্রে ব্যয়বহুল (অদক্ষ)।

— ncohen

@ কনহেন, আমি পাইপ আপডেটটিকে ম্যানুয়ালি ট্রিগার করার কোনও উপায় সম্পর্কে অবগত নই। আপনি যখনই কোনও আপডেট ট্রিগার করতে চান আপনি খাঁটি পাইপ ব্যবহার করতে পারেন এবং অবজেক্টের রেফারেন্সটি পরিবর্তন করতে পারেন। এই এর "বিশুদ্ধ পাইপ" বিভাগের মধ্যে আলোচনা করা হয় পাইপ ডক । আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে আপনি পাইপের পরিবর্তে কোনও উপাদান সম্পত্তি ব্যবহার করতে চাইতে পারেন। পাইপস ডকের শেষে এই কৌশলটি সংক্ষেপে আলোচনা করা হয়েছে।

— রাজকোক

@ এন-এটে, সমস্ত লিঙ্ক স্থির রয়েছে।

— রাজকোককে

Answer 2

tx, আমার প্রয়োজন মতো কাজের সন্ধান পেয়েছিল:

  constructor(private zone:NgZone) {
    // enable to for time travel
    this.appStore.subscribe((state) => {
        this.zone.run(() => {
            console.log('enabled time travel');
        });
    });

চলমান জোন.আরুন উপাদানটিকে পুনরায় রেন্ডার করতে বাধ্য করবে

Comments

এই প্রসঙ্গে অ্যাপস্টোর কী - কোন ধরণের ভেরিয়েবল এবং এর প্রকার? পর্যবেক্ষণযোগ্য বলে মনে হচ্ছে ... তবে আমার পর্যবেক্ষণযোগ্য উপাদানটির ভিতরে রয়েছে যা আমি একটি বোতামের একটি ক্লিকে রিফ্রেশ করতে চাই ... এবং আমি জানি না কীভাবে কোনও সন্তানের উপাদান পদ্ধতি / পিতামাতার / বর্তমান অবস্থান থেকে পরিবর্তনশীল অ্যাক্সেস করতে পারি

— আবদালি চন্দনওয়ালা

Answer 3

পরিবর্তনডেক্টরআরফ পদ্ধতির

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

export class MyComponent {

    constructor(private cdr: ChangeDetectorRef) { }

    selected(item: any) {
        if (item == 'Department')
            this.isDepartment = true;
        else
            this.isDepartment = false;
        this.cdr.detectChanges();
    }

}

Answer 4

আমি * এনজিআইএফ ব্যবহার করে আমার উপাদান পুনরায় লোড করি।

আমার ধারকটির অভ্যন্তরের সমস্ত উপাদানগুলি পুরো জীবনচক্রের হুকগুলিতে ফিরে যায়।

টেমপ্লেটে:

<ng-container *ngIf="_reload">
    components here 
</ng-container>

তারপরে ts ফাইলে:

public _reload = true;

private reload() {
    setTimeout(() => this._reload = false);
    setTimeout(() => this._reload = true);
}

Comments

এই জন্য ধন্যবাদ, @ লুনিস! আমার মনে হয়েছিল এটির মতো কাজ করা উচিত, এবং ব্যতীত আমার কাছে সবকিছু ছিল setTimeout()। এখন খনি একটি সহজ এবং লাইটওয়েট সমাধান সঙ্গে কাজ করছে!

— এলএইচএম

যদি আমি এই 10000+ বার

— upvote

1 টি লক্ষণীয় বিষয় - ধারকটি নিখোঁজ হয়ে আবার উপস্থিত হওয়ার ফলে আকার পরিবর্তন হতে পারে এবং পৃষ্ঠা ঝলকানিতে পারে

— ঘোষ

Answer 5

এখানে অন্যান্য উত্তরগুলি পরিবর্তন সনাক্তকরণ চক্রগুলি ট্রিগার করার জন্য সমাধান সরবরাহ করে যা উপাদানগুলির ভিউ আপডেট করে (যা সম্পূর্ণ পুনরায় রেন্ডার হিসাবে একই নয়)।

ফুল পুনরায় রেন্ডার, যা ধ্বংস reinitialize উপাদান (সমস্ত জীবনচক্র আঙ্গুলসমূহ কলিং এবং পুনর্নির্মাণ দৃশ্য) হবে ব্যবহার করে কাজ করা যেতে পারে ng-template, ng-containerএবং ViewContainerRefনিম্নলিখিত পদ্ধতিতে:

<div>
  <ng-container #outlet >
  </ng-container>
</div>

<ng-template #content>
  <child></child>
</ng-template>

তারপরে উভয়ের সাথে উল্লেখ থাকা উপাদানগুলিতে #outletএবং #contentআমরা আউটলেটগুলির বিষয়বস্তু সাফ করতে পারি এবং শিশু উপাদানটির অন্য একটি উদাহরণ সন্নিবেশ করতে পারি:

@ViewChild("outlet", {read: ViewContainerRef}) outletRef: ViewContainerRef;
@ViewChild("content", {read: TemplateRef}) contentRef: TemplateRef<any>;

private rerender() {
    this.outletRef.clear();
    this.outletRef.createEmbeddedView(this.contentRef);
}

অতিরিক্তভাবে প্রাথমিক সামগ্রী AfterContentInitহুকটিতে প্রবেশ করানো উচিত :

ngAfterContentInit() {
    this.outletRef.createEmbeddedView(this.contentRef);
}

সম্পূর্ণ কার্যক্ষম সমাধানটি এখানে https://stackblitz.com/edit/angular-component-reender পাওয়া যাবে ।

Answer 6

ChangeDetectorRef.detectChanges()এটি হ'ল এটি করার সবচেয়ে কেন্দ্রিক উপায়। ApplicationRef.tick()সাধারণত একটি স্লেজহ্যামার পদ্ধতির খুব বেশি।

ব্যবহার করতে ChangeDetectorRef.detectChanges(), আপনার উপাদানগুলির শীর্ষে আপনার এটির প্রয়োজন হবে:

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

... তারপরে, সাধারণত আপনি আপনার উপন্যাসটি যখন আপনার কনস্ট্রাক্টরে ইনজেক্ট করেন তখন:

constructor( private cdr: ChangeDetectorRef ) { ... }

তারপরে, উপযুক্ত জায়গায় , আপনি এটিকে এটি কল করুন:

this.cdr.detectChanges();

আপনি যেখানে কল করবেন ChangeDetectorRef.detectChanges()তা তাত্পর্যপূর্ণ হতে পারে। আপনাকে জীবনচক্রটি এবং আপনার অ্যাপ্লিকেশনটি কীভাবে কার্যকর হচ্ছে এবং এর উপাদানগুলি রেন্ডার করছে তা পুরোপুরি বুঝতে হবে। আপনার বাড়ির কাজ পুরোপুরি করার এবং ভিতরে কৌণিক জীবনচক্রটি আপনি বুঝতে পেরেছেন তা নিশ্চিত করার জন্য এখানে বিকল্প নেই। তারপরে, একবার আপনি এটি বুঝতে ChangeDetectorRef.detectChanges()পারলে , আপনি যথাযথভাবে ব্যবহার করতে পারেন (কখনও কখনও এটি কোথায় ব্যবহার করা উচিত তা বোঝা খুব সহজ other অন্যান্য সময় এটি খুব জটিল হতে পারে)।