কৌণিক 2 ভাইবোন উপাদান যোগাযোগ

Question

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

আমি কীভাবে বিশদ বিবরণকারীকে বলতে পারি যে তালিকার সংস্থার কোন আইটেমটি ক্লিক করা হয়েছিল?

আমি পিতামাতাদের (অ্যাপকোম্পোনেন্ট) অবধি একটি ইভেন্ট নির্গমন করার বিষয়টি বিবেচনা করেছি এবং পিতামাতাকে একটি @ ইনপুট দিয়ে ডিটেলকম্পোনেন্টে নির্বাচিত আইটেম.আইড সেট করে রেখেছি। অথবা আমি পর্যবেক্ষণযোগ্য সাবস্ক্রিপশন সহ একটি ভাগ করা পরিষেবা ব্যবহার করতে পারি।

---

সম্পাদনা: নির্বাচিত আইটেমটি ইভেন্ট + @ ইনপুট এর মাধ্যমে সেট করা ডিটেলকোম্পোন্টটিকে ট্রিগার করে না, যদিও আমাকে অতিরিক্ত কোড কার্যকর করার প্রয়োজন হয়। সুতরাং আমি নিশ্চিত নই যে এটি একটি গ্রহণযোগ্য সমাধান।

---

তবে এই দুটি পদ্ধতিই doing রুটস্কোপ $ সম্প্রচার বা $ স্কোপ $ পিতা বা মাতা $ সম্প্রচারের মাধ্যমে করা কাজগুলির কৌনিক 1 পদ্ধতির চেয়ে অনেক জটিল বলে মনে হচ্ছে।

কৌনিক 2 এর সমস্ত কিছু একটি উপাদান হয়ে যাওয়ার সাথে আমি অবাক হয়েছি যে উপাদানগুলির যোগাযোগের জন্য সেখানে আরও বেশি তথ্য নেই।

এটি সম্পাদন করার জন্য আরও কোন সহজ / সরল উপায় আছে?

Comments

আপনি কি ভাইবোন ডেটা ভাগ করে নেওয়ার জন্য কোনও উপায় খুঁজে পেয়েছেন? আমার এটি পর্যবেক্ষণযোগ্য হিসাবে প্রয়োজন ..

— মানবিক

Answer 1

আরসি ৪ এ আপডেট হয়েছে: কৌণিক ২ তে ভাইবোন উপাদানগুলির মধ্যে ডেটা পাস করার চেষ্টা করার সময়, এখনই সহজতম উপায় (কৌণিক.আর.সি.৪) হল কৌণিক 2 এর স্তরক্রম নির্ভরতা ইনজেকশনটির সুবিধা নেওয়া এবং একটি ভাগ করা পরিষেবা তৈরি করা।

এখানে পরিষেবাটি হবে:

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

@Injectable()
export class SharedService {
    dataArray: string[] = [];

    insertData(data: string){
        this.dataArray.unshift(data);
    }
}

এখন, এখানে প্যারেন্ট উপাদান হবে

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';
@Component({
    selector: 'parent-component',
    template: `
        <h1>Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>
    `,
    providers: [SharedService],
    directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent{

} 

এবং এটির দুটি সন্তান

শিশু 1

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-component',
    template: `
        <h1>I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>
    `
})
export class ChildComponent implements OnInit{
    data: string[] = [];
    constructor(
        private _sharedService: SharedService) { }
    ngOnInit():any {
        this.data = this._sharedService.dataArray;
    }
}

শিশু 2 (এটি সহোদর)

import {Component} from 'angular2/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-sibling-component',
    template: `
        <h1>I am a child</h1>
        <input type="text" [(ngModel)]="data"/>
        <button (click)="addData()"></button>
    `
})
export class ChildSiblingComponent{
    data: string = 'Testing data';
    constructor(
        private _sharedService: SharedService){}
    addData(){
        this._sharedService.insertData(this.data);
        this.data = '';
    }
}

এখন: এই পদ্ধতিটি ব্যবহার করার সময় নোট করার বিষয়গুলি।

1. প্যারেন্ট উপাদানগুলিতে ভাগ করে নেওয়া পরিষেবার জন্য কেবল পরিষেবা সরবরাহকারীর অন্তর্ভুক্ত করুন এবং বাচ্চাদের নয়।
2. আপনাকে এখনও নির্মাতাদের অন্তর্ভুক্ত করতে হবে এবং বাচ্চাদের মধ্যে পরিষেবাটি আমদানি করতে হবে
3. এই উত্তরটি প্রাথমিকভাবে একটি প্রাথমিক কৌণিক 2 বিটা সংস্করণের জন্য উত্তর দেওয়া হয়েছিল। পরিবর্তিত সমস্ত কিছু হ'ল আমদানি বিবৃতি, সুতরাং যদি আপনি সুযোগ দ্বারা মূল সংস্করণটি ব্যবহার করেন তবে আপনাকে আপডেট করতে হবে এটিই।

Comments

এটি এখনও কৌণিক-আরসি 1 এর জন্য বৈধ?

— সার্জিও

যদিও আমি বিশ্বাস করি না যে এটি অংশীদারি পরিষেবাটিতে কিছু আপডেট হয়েছে সেই ভাইবোনকে জানিয়ে দেয়। চাইল্ড-কম্পোনেন্ট 1 এমন কিছু করে যা শিশু-উপাদান 2 এর প্রতিক্রিয়া জানাতে দরকার, এই পদ্ধতিটি এটি পরিচালনা করে না। আমি বিশ্বাস করি যে পথটি পর্যবেক্ষণযোগ্যদের সাথেই রয়েছে?

— ড্যানিস.শ্যাপার্ড

@ সুফিয়ান: আমি অনুমান করতে যাচ্ছি যে বাচ্চাদের সরবরাহকারীর ক্ষেত্র যুক্ত করার কারণে অ্যাংুলার প্রত্যেকের জন্য নতুন ব্যক্তিগত ঘটনা তৈরি করে। আপনি যখন এগুলি যুক্ত করবেন না, তারা পিতামাতার "সিঙ্গলটন" উদাহরণটি ব্যবহার করে।

— রাল্ফ

দেখে মনে হচ্ছে এটি সর্বশেষ আপডেটের সাথে আর কাজ করছে না

— সুফিয়ান জাবর

এটি পুরানো। directivesউপাদানটিতে আর ঘোষণা করা হয় না।

— নাট গার্ডনার

Answer 2

2 টি পৃথক উপাদানগুলির ক্ষেত্রে (নেস্টেড উপাদান নয়, পিতা-মাতা \ শিশু \ নাতি-নাতালিকা) আপনাকে এই পরামর্শ দিচ্ছি:

MissionService:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()

export class MissionService {
  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }
  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }

}

AstronautComponent:

import { Component, Input, OnDestroy } from '@angular/core';
import { MissionService } from './mission.service';
import { Subscription }   from 'rxjs/Subscription';
@Component({
  selector: 'my-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
      <button
        (click)="confirm()"
        [disabled]="!announced || confirmed">
        Confirm
      </button>
    </p>
  `
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
  mission = '<no mission announced>';
  confirmed = false;
  announced = false;
  subscription: Subscription;
  constructor(private missionService: MissionService) {
    this.subscription = missionService.missionAnnounced$.subscribe(
      mission => {
        this.mission = mission;
        this.announced = true;
        this.confirmed = false;
    });
  }
  confirm() {
    this.confirmed = true;
    this.missionService.confirmMission(this.astronaut);
  }
  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

উত্স: পিতামাতা এবং শিশুরা একটি পরিষেবার মাধ্যমে যোগাযোগ করে

Comments

আপনি এই উত্তরে কিছু পরিভাষা যুক্ত করতে চান। আমি বিশ্বাস করি এটি আরএক্সজেএস, পর্যবেক্ষণযোগ্য প্যাটার্ন ইত্যাদির সাথে তাল মিলবে।

— কার্নস

Answer 3

এটি করার একটি উপায় হ'ল একটি ভাগ করা পরিষেবা ব্যবহার করা ।

তবে আমি নিম্নলিখিত সমাধানটি আরও সহজ দেখতে পেয়েছি, এটি 2 ভাইবোনদের মধ্যে ডেটা ভাগ করার অনুমতি দেয় ((আমি এটি কেবলমাত্র কৌনিক 5 তে পরীক্ষা করেছি )

আপনার প্যারেন্ট উপাদান টেম্পলেট:

<!-- Assigns "AppSibling1Component" instance to variable "data" -->
<app-sibling1 #data></app-sibling1>
<!-- Passes the variable "data" to AppSibling2Component instance -->
<app-sibling2 [data]="data"></app-sibling2> 

অ্যাপ্লিকেশান-sibling2.component.ts

import { AppSibling1Component } from '../app-sibling1/app-sibling1.component';
...

export class AppSibling2Component {
   ...
   @Input() data: AppSibling1Component;
   ...
}

Comments

এটি কি আলগা সংযোগ এবং এইভাবে উপাদানগুলির ধারণার বিরোধিতা করে না?

— রবিন

এটির কোনও পরিষ্কার বা নোংরা উপায় এটি সম্পর্কে কারও ধারণা আছে? এটি এক দিকে ডেটা ভাগ করে নেওয়ার জন্য অনেক সহজ বলে মনে হচ্ছে, উদাহরণস্বরূপ কেবল sibiling1 থেকে sibiling2 পর্যন্ত, তবে অন্যভাবে নয়

— সারা

Answer 4

এটি সম্পর্কে এখানে একটি আলোচনা আছে।

https://github.com/angular/angular.io/issues/2663

অ্যালেক্স জে এর উত্তর ভাল তবে এটি জুলাই, ২০১ of সালের মতো বর্তমান কৌণিক 4 নিয়ে আর কাজ করে না।

এবং এই প্লাঙ্কার লিঙ্কটি প্রদর্শন করবে যে কীভাবে ভাইবোনদের মধ্যে ভাগ করে নেওয়া পরিষেবা এবং পর্যবেক্ষণযোগ্য ব্যবহার করে যোগাযোগ করা যায়।

https://embed.plnkr.co/P8xCEwSKgcOg07pwDrlO/

Answer 5

একটি নির্দেশিকা নির্দিষ্ট পরিস্থিতিতে উপাদানগুলিকে 'সংযুক্ত' করতে বোধ করতে পারে। আসলে সংযুক্ত জিনিসগুলি এমনকি সম্পূর্ণ উপাদানগুলির প্রয়োজন হয় না, এবং কখনও কখনও এটি বেশি লাইটওয়েট হয় এবং বাস্তবে এটি সহজ না হয় তবে।

উদাহরণস্বরূপ আমি একটি Youtube Playerউপাদান পেয়েছি (ইউটিউব এপিআই মোড়ানো) এবং আমি এর জন্য কিছু নিয়ামক বোতাম চেয়েছিলাম। বোতামগুলি আমার মূল উপাদানটির অংশ না হওয়ার একমাত্র কারণ হ'ল তারা ডিওমের অন্য কোথাও অবস্থিত।

এই ক্ষেত্রে এটি কেবলমাত্র একটি 'এক্সটেনশান' উপাদান যা কেবলমাত্র 'পিতামাতার' উপাদানটির সাথে ব্যবহারযোগ্য। আমি 'পিতামাতা' বলি, তবে ডোমটিতে এটি একটি সহোদর - তাই আপনি যা চাইবেন তা কল করুন।

যেমন আমি বলেছিলাম এটি সম্পূর্ণ উপাদান হওয়ার দরকার নেই, আমার ক্ষেত্রে এটি কেবল একটি <button>(তবে এটি একটি উপাদান হতে পারে)।

@Directive({
    selector: '[ytPlayerPlayButton]'
})
export class YoutubePlayerPlayButtonDirective {

    _player: YoutubePlayerComponent; 

    @Input('ytPlayerVideo')
    private set player(value: YoutubePlayerComponent) {
       this._player = value;    
    }

    @HostListener('click') click() {
        this._player.play();
    }

   constructor(private elementRef: ElementRef) {
       // the button itself
   }
}

এইচটিএমএলে ProductPage.component, youtube-playerস্পষ্টতই আমার উপাদানটি ইউটিউব এপিআই কে মোড় দেয়।

<youtube-player #technologyVideo videoId='NuU74nesR5A'></youtube-player>

... lots more DOM ...

<button class="play-button"        
        ytPlayerPlayButton
        [ytPlayerVideo]="technologyVideo">Play</button>

দিকনির্দেশনাটি আমার জন্য সবকিছু আপ করে এবং আমাকে এইচটিএমএলে (ক্লিক) ইভেন্টটি ঘোষণা করতে হবে না।

সুতরাং নির্দেশিকাটি ProductPageমধ্যস্থতাকারী হিসাবে জড়িত না হয়ে ভিডিও প্লেয়ারের সাথে সুন্দরভাবে সংযোগ স্থাপন করতে পারে ।

আমি এটি প্রথমবার এটি করেছি, সুতরাং আরও জটিল পরিস্থিতির জন্য এটি কতটা মাপেরযোগ্য হতে পারে তা এখনও নিশ্চিত হন না। এর জন্য যদিও আমি খুশি এবং এটি আমার এইচটিএমএলকে সহজ এবং সমস্ত কিছুর দায়িত্ব পৃথক করে।

Comments

বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ কৌণিক ধারণাগুলির মধ্যে একটি হ'ল একটি উপাদানটি কোনও টেম্পলেট সহ কেবল একটি নির্দেশিকা। একবার আপনি এর অর্থ কী তা বোঝার পরে নির্দেশনাগুলি এতটা ভীতিজনক নয় - এবং আপনি বুঝতে পারবেন যে আপনি এটি কোনও আচরণের সাথে সংযুক্ত করতে কোনও উপাদান প্রয়োগ করতে পারেন।

— সাইমন_উইভার

আমি এটি চেষ্টা করেছি তবে এর সমমানের জন্য আমি একটি সদৃশ শনাক্তকারী ত্রুটি পেয়েছি player। আমি যদি প্লেয়ারের প্রথম উল্লেখটি ছেড়ে দিই তবে আমি একটি রেঞ্জআরআর পাব। এটি কীভাবে কাজ করবে বলে আমি স্ট্যাম্পড হয়েছি।

— ক্যাথারিন ওসবার্ন

@ কাঠারিনসোবর্ন দেখে মনে হচ্ছে যে আমি _playerখেলোয়াড়ের প্রতিনিধিত্বকারী ব্যক্তিগত ক্ষেত্রের জন্য আমার আসল কোডটিতে ব্যবহার করছি তাই হ্যাঁ আপনি যদি এটি ঠিক অনুলিপি করেন তবে আপনি একটি ত্রুটি পেয়ে যাবেন। আপডেট হবে। দুঃখিত!

— সাইমন_উইভার

Answer 6

এখানে সাধারণ ব্যবহারিক ব্যাখ্যা: সহজভাবে এখানে ব্যাখ্যা করা হয়েছে

কল.সারিস.স.

import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CallService {
 private subject = new Subject<any>();

 sendClickCall(message: string) {
    this.subject.next({ text: message });
 }

 getClickCall(): Observable<any> {
    return this.subject.asObservable();
 }
}

যে উপাদানটি থেকে আপনি পর্যবেক্ষণযোগ্যকে কল করতে চান তা অন্য উপাদানটিকে জানাতে বোতামটি ক্লিক করা হয়েছে

import { CallService } from "../../../services/call.service";

export class MarketplaceComponent implements OnInit, OnDestroy {
  constructor(public Util: CallService) {

  }

  buttonClickedToCallObservable() {
   this.Util.sendClickCall('Sending message to another comp that button is clicked');
  }
}

যে উপাদানটি আপনি বোতামে ক্রিয়া সম্পাদন করতে চান সেখানে অন্য উপাদানটিতে ক্লিক করা হয়েছে

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";


ngOnInit() {

 this.subscription = this.Util.getClickCall().subscribe(message => {

 this.message = message;

 console.log('---button clicked at another component---');

 //call you action which need to execute in this component on button clicked

 });

}

import { Subscription } from 'rxjs/Subscription';
import { CallService } from "../../../services/call.service";


ngOnInit() {

 this.subscription = this.Util.getClickCall().subscribe(message => {

 this.message = message;

 console.log('---button clicked at another component---');

 //call you action which need to execute in this component on button clicked

});

}

এটি পড়ার মাধ্যমে উপাদানগুলির যোগাযোগের বিষয়ে আমার বোধগম্যতা স্পষ্ট: http://musttoknow.com/angular-4-angular-5-communicate-two-comp घटक- using-observable-subject/

Comments

আরে সহজ সমাধানের জন্য অনেক ধন্যবাদ> আমি স্ট্যাকব্লিটজে চেষ্টা করেছিলাম যা ভাল কাজ করেছে। তবে আমার অ্যাপ্লিকেশনটিতে অলস লোডযুক্ত রুট রয়েছে (সরবরাহ করা হয়েছে: 'রুট' ব্যবহার করেছেন) এবং এইচটিটিপি কল সেট এবং পেতে get আপনি কি আমাকে এইচটিটিপি কল দিয়ে সহায়তা করতে পারেন? অনেক চেষ্টা

— করেও

Answer 7

ভাগ করা পরিষেবা এই সমস্যাটির জন্য একটি ভাল সমাধান। আপনি যদি কিছু ক্রিয়াকলাপের তথ্যও সঞ্চয় করতে চান তবে আপনি আপনার মূল মডিউলগুলি (app.module) সরবরাহকারীর তালিকায় ভাগ করে নেওয়া পরিষেবা যুক্ত করতে পারেন।

@NgModule({
    imports: [
        ...
    ],
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        SharedService,
        ...
    ]
});

তারপরে আপনি এটিকে সরাসরি আপনার উপাদানগুলিতে সরবরাহ করতে পারেন,

constructor(private sharedService: SharedService)

ভাগ করা পরিষেবা দিয়ে আপনি হয় ফাংশন ব্যবহার করতে পারেন বা আপনি একবারে একাধিক স্থান আপডেট করতে একটি বিষয় তৈরি করতে পারেন।

@Injectable()
export class FolderTagService {
    public clickedItemInformation: Subject<string> = new Subject(); 
}

আপনার তালিকার উপাদানটিতে আপনি ক্লিক করা আইটেমের তথ্য প্রকাশ করতে পারেন,

this.sharedService.clikedItemInformation.next("something");

এবং তারপরে আপনি আপনার বিশদ উপাদানটিতে এই তথ্যটি আনতে পারেন:

this.sharedService.clikedItemInformation.subscribe((information) => {
    // do something
});

স্পষ্টতই, যে উপাদানগুলি উপাদানগুলির তালিকা ভাগ করে তা যে কোনও কিছু হতে পারে। আশাকরি এটা সাহায্য করবে.

Comments

এটি একটি শেয়ার্ড সার্ভিসের এই ধারণার সর্বাধিক সোজা ফরওয়ার্ড (ওরফে টর্স) উদাহরণ, এবং কোনও গ্রহণযোগ্য উত্তর না থাকায় সত্যই এর দৃশ্যমানতা বাড়াতে উত্সাহিত করা উচিত।

— আইজিঞ্জা

Answer 8

আপনার উপাদানগুলির মধ্যে পিতা-মাতার সম্পর্ক স্থাপন করতে হবে। সমস্যাটি হ'ল আপনি পিতা বা মাতা উপাদানটির নির্মাতায় কেবলমাত্র শিশু উপাদানগুলি ইনজেকশন করতে এবং স্থানীয় ভেরিয়েবলে এটি সঞ্চয় করতে পারেন। পরিবর্তে, @ViewChildসম্পত্তি ঘোষক ব্যবহার করে আপনার পিতামাতার উপাদানগুলিতে শিশু উপাদানগুলি ঘোষণা করতে হবে । আপনার প্যারেন্ট উপাদানটি দেখতে এমন হওয়া উচিত:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ListComponent } from './list.component';
import { DetailComponent } from './detail.component';

@Component({
  selector: 'app-component',
  template: '<list-component></list-component><detail-component></detail-component>',
  directives: [ListComponent, DetailComponent]
})
class AppComponent implements AfterViewInit {
  @ViewChild(ListComponent) listComponent:ListComponent;
  @ViewChild(DetailComponent) detailComponent: DetailComponent;

  ngAfterViewInit() {
    // afther this point the children are set, so you can use them
    this.detailComponent.doSomething();
  }
}

https://angular.io/docs/ts/latest/api/core/index/ViewChild-var.html

https://angular.io/docs/ts/latest/cookbook/component-communication.html#parent-to-view-child

সাবধান, ngAfterViewInitলাইফসাইক্ল হুক বলার পরে, সন্তানের উপাদানটি প্যারেন্ট উপাদানটির নির্মাত্রে পাওয়া যাবে না। এই হুক সহজ ধরার জন্য AfterViewInitআপনার প্যারেন্ট ক্লাসে ইন্টারফেসটি একইভাবে প্রয়োগ করুন আপনি যেমন করতেন OnInit।

তবে, এই ব্লগ নোটে বর্ণিত অন্যান্য সম্পত্তি হিসাবে ঘোষক রয়েছে: http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-differences-viewproviders/

Answer 9

আচরণের বিষয়। আমি সে সম্পর্কে একটি ব্লগ লিখেছি ।

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
private noId = new BehaviorSubject<number>(0); 
  defaultId = this.noId.asObservable();

newId(urlId) {
 this.noId.next(urlId); 
 }

এই উদাহরণে আমি টাইপ সংখ্যার শালীন আচরণের বিষয় ঘোষণা করছি। এছাড়াও এটি একটি পর্যবেক্ষণযোগ্য। এবং যদি "হ্যাভেন্ড কিছু" হয় তবে এটি নতুন ()।। ফাংশনটির সাথে পরিবর্তিত হবে।

সুতরাং, ভাইবোনটির উপাদানগুলিতে, কেউ পরিবর্তন করতে, ফাংশনটি কল করবে এবং অন্যটি সেই পরিবর্তন বা তদ্বিপরীত দ্বারা প্রভাবিত হবে।

উদাহরণস্বরূপ, আমি ইউআরএল থেকে আইডি পেয়েছি এবং আচরণের বিষয় থেকে নোড আপডেট করি।

public getId () {
  const id = +this.route.snapshot.paramMap.get('id'); 
  return id; 
}

ngOnInit(): void { 
 const id = +this.getId ();
 this.taskService.newId(id) 
}

এবং অন্য দিক থেকে, আমি জিজ্ঞাসা করতে পারি যে এই আইডিটি "আমি কখনই চাই" কিনা এবং তার পরে কোনও পছন্দ করে নিন, আমার ক্ষেত্রে যদি আমি কোনও টাস্কটি ডিলেট করতে চাই এবং সেই টাস্কটি বর্তমান ইউআরএল হয়, এটি আমাকে পুনর্নির্দেশ করতে হবে বাড়িতে:

delete(task: Task): void { 
  //we save the id , cuz after the delete function, we  gonna lose it 
  const oldId = task.id; 
  this.taskService.deleteTask(task) 
      .subscribe(task => { //we call the defaultId function from task.service.
        this.taskService.defaultId //here we are subscribed to the urlId, which give us the id from the view task 
                 .subscribe(urlId => {
            this.urlId = urlId ;
                  if (oldId == urlId ) { 
                // Location.call('/home'); 
                this.router.navigate(['/home']); 
              } 
          }) 
    }) 
}

Answer 10

এটি আপনি যা চান ঠিক তা নয় তবে এটি আপনাকে অবশ্যই সহায়তা করবে

আমি আশ্চর্য হয়েছি যে উপাদানগুলির যোগাযোগের জন্য সেখানে আরও বেশি তথ্য নেই <=> এই টিউটোরিয়ালটি অ্যাঙ্গুয়াল 2 দ্বারা বিবেচনা করুন

ভাইবোন উপাদান যোগাযোগের জন্য, আমি সাথে যেতে পরামর্শ দিই sharedService। যদিও অন্যান্য অপশন উপলব্ধ।

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {NameService} from 'src/nameService';


import {TheContent} from 'src/content';
import {Navbar} from 'src/nav';


@Component({
  selector: 'app',
  directives: [TheContent,Navbar],
  providers: [NameService],
  template: '<navbar></navbar><thecontent></thecontent>'
})


export class App {
  constructor() {
    console.log('App started');
  }
}

bootstrap(App,[]);

আরও কোডের জন্য দয়া করে উপরে লিঙ্কটি দেখুন।

সম্পাদনা করুন: এটি একটি খুব ছোট ডেমো। আপনি ইতিমধ্যে উল্লেখ করেছেন যে আপনি ইতিমধ্যে চেষ্টা করেছেন sharedService। সুতরাং আরও তথ্যের জন্য অনুগ্রহ করে এই টিউটোরিয়ালটি Angualr2 দ্বারা বিবেচনা করুন।

Answer 11

আমি বাঁধাইয়ের মাধ্যমে পিতামাতার কাছ থেকে তার কোনও সন্তানের কাছে সেটার পদ্ধতিগুলি নিবিষ্ট করে চলেছি, সেই পদ্ধতিটিকে সন্তানের উপাদানগুলির ডেটা সহ কল ​​করে, অর্থাত পিতামণ্ডলের উপাদানটি আপডেট হয়েছে এবং তারপরে নতুন ডেটা সহ এটির দ্বিতীয় সন্তানের উপাদানটি আপডেট করতে পারে। এটির জন্য এটি 'বাঁধাই' বা তীর ফাংশনটি ব্যবহার করার প্রয়োজন নেই।

এটির সুবিধা রয়েছে যে বাচ্চারা একে অপরের সাথে এত মিলিত হয় না কারণ তাদের নির্দিষ্ট ভাগ করা পরিষেবার প্রয়োজন নেই।

আমি পুরোপুরি নিশ্চিত নই যে এটি সর্বোত্তম অনুশীলন, এটি সম্পর্কে অন্যের মতামত শুনতে আকর্ষণীয় হবে।