Bagaimana cara meneruskan data ke komponen yang diarahkan ke Sudut?

Di salah satu template Angular 2 route saya ( FirstComponent ) saya memiliki tombol

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

Tujuan saya adalah mencapai:

Klik tombol -> rute ke komponen lain sambil menyimpan data dan tanpa menggunakan komponen lain sebagai arahan.

Ini yang saya coba ...

PENDEKATAN 1

Dalam tampilan yang sama saya menyimpan pengumpulan data yang sama berdasarkan interaksi pengguna.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

Biasanya saya akan rute ke SecondComponent oleh

 this._router.navigate(['SecondComponent']);

akhirnya melewati data dengan

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

sedangkan definisi tautan dengan parameter adalah

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

Masalah dengan pendekatan ini adalah saya kira saya tidak bisa melewatkan data yang kompleks (misalnya objek seperti property3) di-url;

PENDEKATAN 2ND

Alternatif akan menyertakan SecondComponent sebagai arahan dalam FirstComponent.

  <SecondComponent [p3]="property3"></SecondComponent>

Namun saya ingin merutekan ke komponen itu, tidak termasuk!

PENDEKATAN 3RD

Solusi paling layak yang saya lihat di sini adalah menggunakan Layanan (mis. FirstComponentService) untuk

• menyimpan data (_firstComponentService.storeData ()) pada routeWithData () di FirstComponent
• mengambil data (_firstComponentService.retrieveData ()) di ngOnInit () di SecondComponent

Sementara pendekatan ini tampaknya sangat layak, saya bertanya-tanya apakah ini adalah cara termudah / paling elegan untuk mencapai tujuan.

Secara umum saya ingin tahu apakah saya kehilangan pendekatan potensial lain untuk meneruskan data antar komponen, terutama dengan jumlah kode yang lebih sedikit

perbarui 4.0.0

Lihat dokumen Angular untuk detail lebih lanjut https://angular.io/guide/router#fetch-data-before-navigating

asli

Menggunakan layanan adalah cara untuk pergi. Dalam params rute, Anda hanya harus meneruskan data yang ingin Anda tampilkan di bilah URL browser.

Lihat juga https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Router yang dikirim dengan RC.4 memperkenalkan kembali data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Lihat juga Plunker di https://github.com/angular/angular/issues/9757#issuecomment-229847781

Saya pikir karena kita tidak memiliki $ rootScope semacam itu di sudut 2 seperti di sudut 1.x. Kita dapat menggunakan layanan / kelas sudut 2 saat dalam ngOnDestroy meneruskan data ke layanan dan setelah routing mengambil data dari layanan dalam fungsi ngOnInit :

Di sini saya menggunakan DataService untuk berbagi objek pahlawan:

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

Lulus objek dari komponen halaman pertama:

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

Ambil objek dari komponen halaman kedua:

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

Berikut ini contohnya: plunker

<div class="button" click="routeWithData()">Pass data and route</div>

nah cara termudah untuk melakukannya dalam angular 6 atau versi lain yang saya harap adalah dengan mendefinisikan path Anda dengan jumlah data yang ingin Anda lewati

{path: 'detailView/:id', component: DetailedViewComponent}

seperti yang dapat Anda lihat dari definisi rute saya, saya telah menambahkan status /:idke data yang ingin saya sampaikan ke komponen melalui navigasi router. Karenanya kode Anda akan terlihat seperti

<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>

untuk membaca idpada komponen, impor saja ActivatedRoute like

import { ActivatedRoute } from '@angular/router'

dan di ngOnInittempat Anda mengambil data

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

Anda dapat membaca lebih lanjut di artikel ini https://www.tektutorialshub.com/angular-passing-parameters-to-route/

7.2.0 sudut memperkenalkan cara baru melewatkan data saat menavigasi antara komponen yang diarahkan:

@Component({
  template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent  {
  constructor(public router: Router) {}
  navigateWithState() {
    this.router.navigateByUrl('/123', { state: { hello: 'world' } });
  }
}

Atau:

@Component({
  selector: 'my-app',
  template: `
  <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent  {}

Untuk membaca keadaan, Anda dapat mengakses window.history.stateproperti setelah navigasi selesai:

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }
}

Beberapa orang super pintar (tmburnell) yang bukan saya menyarankan untuk menulis ulang data rute:

let route = this.router.config.find(r => r.path === '/path');
route.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

Seperti yang terlihat di sini di komentar.

Saya harap seseorang akan menemukan ini berguna

Saya ini pendekatan lain tidak baik untuk masalah ini. Saya kira pendekatan terbaik adalah Query-Parameter oleh Routerangular yang memiliki 2 cara:

Melewati parameter kueri secara langsung

Dengan kode ini Anda dapat menavigasi ke urloleh paramskode html Anda:

<a [routerLink]="['customer-service']" [queryParams]="{ serviceId: 99 }"></a>

Melewati parameter kueri dengan Router

Anda harus menyuntikkan router ke dalam constructorsuka Anda :

constructor(private router:Router){

}

Sekarang gunakan itu seperti:

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

Sekarang jika Anda ingin membaca dari yang Routerlain ComponentAnda harus menggunakan ActivatedRoutelike:

constructor(private activateRouter:ActivatedRouter){

}

dan subscribeitu:

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['serviceId'] || 0;
      });
  }

Ini 2019 dan banyak jawaban di sini akan berhasil, tergantung pada apa yang ingin Anda lakukan. Jika Anda ingin melewati beberapa keadaan internal yang tidak terlihat di URL (params, query) Anda dapat menggunakan statesejak 7.2 (seperti yang saya pelajari hari ini :)).

Dari blog (kredit Tomasz Kula) - Anda menavigasi ke rute ....

... dari ts: this.router.navigateByUrl('/details', { state: { hello: 'world' } });

... dari templat HTML: <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>

Dan untuk mengambilnya di komponen target:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

Terlambat, tapi harap ini membantu seseorang dengan Angular baru-baru ini.

Solusi dengan ActiveRoute (jika Anda ingin melewati objek dengan rute - gunakan JSON.stringfy / JSON.parse):

Siapkan objek sebelum mengirim:

export class AdminUserListComponent {

  users : User[];

  constructor( private router : Router) { }

  modifyUser(i) {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          "user": JSON.stringify(this.users[i])
      }
    };

    this.router.navigate(["admin/user/edit"],  navigationExtras);
  }

}

Terima objek Anda di komponen tujuan:

export class AdminUserEditComponent  {

  userWithRole: UserWithRole;      

  constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

      this.route.queryParams.subscribe(params => {
        this.userWithRole.user = JSON.parse(params["user"]);
      });
  }

}

Pendekatan ke-3 adalah cara paling umum untuk berbagi data antar komponen. Anda dapat menyuntikkan layanan item yang ingin Anda gunakan dalam komponen terkait.

import { Injectable } from '@angular/core';
import { Predicate } from '../interfaces'

import * as _ from 'lodash';

@Injectable()
export class ItemsService {

    constructor() { }


    removeItemFromArray<T>(array: Array<T>, item: any) {
        _.remove(array, function (current) {
            //console.log(current);
            return JSON.stringify(current) === JSON.stringify(item);
        });
    }

    removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
        _.remove(array, predicate);
    }

    setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
        var _oldItem = _.find(array, predicate);
        if(_oldItem){
            var index = _.indexOf(array, _oldItem);
            array.splice(index, 1, item);
        } else {
            array.push(item);
        }
    }


    addItemToStart<T>(array: Array<T>, item: any) {
        array.splice(0, 0, item);
    }


    getPropertyValues<T, R>(array: Array<T>, property : string) : R
    {
        var result = _.map(array, property);
        return <R><any>result;
    }

    getSerialized<T>(arg: any): T {
        return <T>JSON.parse(JSON.stringify(arg));
    }
}



export interface Predicate<T> {
    (item: T): boolean
}

Lewati menggunakan JSON

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToPass| json }">
         sample Link                   
  </a>

menggunakan layanan bersama untuk menyimpan data dengan indeks khusus. lalu kirim indeks khusus itu dengan queryParam. pendekatan ini lebih fleksibel .

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

.

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

katakan kamu punya

1. component1.ts
2. component1.html

dan Anda ingin meneruskan data ke component2.ts .

• di component1.ts adalah variabel dengan data say

    //component1.ts
    item={name:"Nelson", bankAccount:"1 million dollars"}
  
    //component1.html
     //the line routerLink="/meter-readings/{{item.meterReadingId}}" has nothing to 
    //do with this , replace that with the url you are navigating to
    <a
      mat-button
      [queryParams]="{ params: item | json}"
      routerLink="/meter-readings/{{item.meterReadingId}}"
      routerLinkActive="router-link-active">
      View
    </a>
  
    //component2.ts
    import { ActivatedRoute} from "@angular/router";
    import 'rxjs/add/operator/filter';
  
    /*class name etc and class boiler plate */
    data:any //will hold our final object that we passed 
    constructor(
    private route: ActivatedRoute,
    ) {}
  
   ngOnInit() {
  
   this.route.queryParams
    .filter(params => params.reading)
    .subscribe(params => {
    console.log(params); // DATA WILL BE A JSON STRING- WE PARSE TO GET BACK OUR 
                         //OBJECT
  
    this.data = JSON.parse(params.item) ;
  
    console.log(this.data,'PASSED DATA'); //Gives {name:"Nelson", bankAccount:"1 
                                          //million dollars"}
     });
    }

Anda dapat menggunakan BehaviorSubject untuk berbagi data antar komponen yang dirutekan. BehaviorSubject memegang satu nilai. Saat berlangganan, ia akan segera mengeluarkan nilai. Subjek tidak memiliki nilai.

Dalam layanan.

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

Dalam komponen Anda dapat berlangganan BehaviorSubject ini.

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

Catatan: Subjek tidak akan berfungsi di sini, Hanya perlu menggunakan Subjek Perilaku.