Angular 라우팅 구성 요소에 데이터를 전달하려면 어떻게합니까?

내 Angular 2 경로 템플릿 중 하나 ( FirstComponent )에 버튼이 있습니다.

first.component.html

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

내 목표 는 달성하는 것입니다.

버튼 클릭-> 다른 구성 요소를 지시문으로 사용하지 않고 데이터를 유지하면서 다른 구성 요소로 라우팅합니다.

이것은 내가 시도한 것입니다 ...

첫 번째 접근법

같은보기에서 나는 사용자 상호 작용을 기반으로 동일한 데이터를 수집 저장합니다.

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

일반적으로 다음 으로

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

결국 데이터를 전달

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

반면 매개 변수가있는 링크의 정의는

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

이 접근법의 문제는 복잡한 데이터 (예 : property3와 같은 객체 )를 URL로 전달할 수 없다는 것입니다 .

2 차 접근법

대안은 FirstComponent 에서 SecondComponent 를 지시문 으로 포함하는 것 입니다.

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

그러나 해당 구성 요소 로 라우팅 하고 싶지 는 않습니다.

3 차 접근법

내가 볼 수있는 가장 실용적인 해결책은 서비스 (예 : FirstComponentService)를 사용하여

• FirstComponent의 routeWithData ()에 데이터 (_firstComponentService.storeData ())를 저장 하십시오.
• 검색 의 (_firstComponentService.retrieveData ()) 데이터를 ngOnInit ()을 에 SecondComponent

이 접근법은 완벽하게 실행 가능한 것처럼 보이지만 이것이 목표를 달성하는 가장 쉽고 우아한 방법인지 궁금합니다.

일반적으로 구성 요소간에 데이터를 전달하는 다른 잠재적 인 접근법 이 누락되었는지 , 특히 코드의 양이 적을 지 알고 싶습니다.

4.0.0 업데이트

자세한 내용은 각도 문서를 참조하십시오 https://angular.io/guide/router#fetch-data-before-navigating

실물

서비스를 사용하는 것이 좋습니다. 경로 매개 변수에서는 브라우저 URL 표시 줄에 반영하려는 데이터 만 전달해야합니다.

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

RC.4와 함께 제공된 라우터는 다시 소개합니다 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();
  }
}

https://github.com/angular/angular/issues/9757#issuecomment-229847781 에서 Plunker를 참조하십시오.

우리는 각도 1.x에서와 같이 각도 2에 $ rootScope 종류 가 없기 때문에 생각합니다 . ngOnDestroy 에서 데이터를 서비스로 전달 하는 동안 ngOnInit 함수 에서 서비스에서 데이터를 가져 오는 동안 angular 2 공유 서비스 / 클래스를 사용할 수 있습니다 .

여기서는 DataService를 사용하여 영웅 객체를 공유하고 있습니다.

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

첫 페이지 컴포넌트에서 오브젝트를 전달하십시오.

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

두 번째 페이지 구성 요소에서 객체를 가져옵니다.

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

다음은 예입니다 : plunker

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

각도 6 또는 다른 버전에서 가장 쉬운 방법은 전달하려는 데이터 양으로 경로를 정의하는 것입니다.

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

내 경로 정의에서 볼 수 있듯이 /:id라우터 탐색을 통해 구성 요소에 전달하려는 데이터에 스탠드를 추가했습니다 . 따라서 코드는 다음과 같습니다

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

id구성 요소 를 읽으려면 다음 ActivatedRoute 과 같이 가져 오십시오.

import { ActivatedRoute } from '@angular/router'

그리고 ngOnInit당신이 데이터를 검색하는 곳

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

이 기사에서 더 많은 것을 읽을 수 있습니다 https://www.tektutorialshub.com/angular-passing-parameters-to-route/

Angular 7.2.0에서는 라우팅 된 구성 요소 사이를 탐색 할 때 데이터를 전달하는 새로운 방법을 도입했습니다.

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

또는:

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

상태를 읽으려면 window.history.state탐색이 완료된 후 속성에 액세스 할 수 있습니다 .

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

  constructor(public activatedRoute: ActivatedRoute) {}

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

내가 아닌 슈퍼 똑똑한 사람 (tmburnell)은 경로 데이터를 다시 쓰도록 제안합니다.

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

의견에서 여기 에서 볼 수 있듯이 .

누군가가 이것을 유용하게 사용하기를 바랍니다.

나는 이것이 다른 방법 으로이 문제에 좋지 않다. 가장 좋은 방법은 각도 별로 쿼리 매개 변수입니다Router .

쿼리 매개 변수를 직접 전달

이 코드를 사용하면 탐색 할 수 있습니다 url하여 paramsHTML 코드에서 :

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

다음에 의해 쿼리 매개 변수 전달 Router

당신은 당신의 constructor마음에 라우터를 주입해야합니다 :

constructor(private router:Router){

}

이제 다음과 같이 사용하십시오.

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

이제 Router다른 곳 에서 읽으려면 다음과 같이 Component사용해야합니다 ActivatedRoute.

constructor(private activateRouter:ActivatedRouter){

}

그리고 subscribe그것은 :

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

2019 년이며 여기에 원하는 답변에 따라 많은 답변이 작동합니다. URL (매개 변수, 쿼리)에 보이지 않는 내부 상태를 전달하려면 state7.2 오늘 부터 사용할 수 있습니다 ( 오늘 방금 배운 것처럼 :)).

블로그 (신용 Tomasz Kula)-경로로 이동하십시오 ....

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

... HTML 템플릿에서 : <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>

대상 구성 요소에서 가져옵니다.

constructor(public activatedRoute: ActivatedRoute) {}

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

늦었지만 이것이 최근 Angular를 가진 사람에게 도움이되기를 바랍니다.

ActiveRoute 솔루션 (경로로 객체를 전달하려면 JSON.stringfy / JSON.parse를 사용하십시오) :

보내기 전에 물건을 준비하십시오 :

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

}

대상 컴포넌트에서 오브젝트를 수신하십시오.

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

}

세 번째 접근 방식은 구성 요소간에 데이터를 공유하는 가장 일반적인 방법입니다. 관련 컴포넌트에서 사용하려는 아이템 서비스를 주입 할 수 있습니다.

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
}

JSON을 사용하여 전달

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

공유 서비스를 사용하여 사용자 정의 색인으로 데이터를 저장하십시오. 그런 다음 queryParam을 사용하여 해당 사용자 정의 색인을 보내십시오. 이 방법은보다 유연 합니다.

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

당신이 있다고 말해

1. component1.ts
2. component1.html

데이터를 component2.ts 로 전달하려고합니다 .

• component1.ts에서 데이터가있는 변수입니다

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

라우팅 된 구성 요소간에 데이터를 공유하기 위해 BehaviorSubject를 사용할 수 있습니다. BehaviorSubject에는 하나의 값이 있습니다. 구독하면 즉시 값을 내 보냅니다. 주제는 가치를 보유하지 않습니다.

서비스 중.

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

컴포넌트에서이 BehaviorSubject를 구독 할 수 있습니다.

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

참고 : 여기서는 주제가 작동하지 않으므로 행동 주제 만 사용해야합니다.