[angular] 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

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

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

답변

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

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

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

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

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

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

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

import { ActivatedRoute } from '@angular/router'

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

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

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

  constructor(public activatedRoute: ActivatedRoute) {}

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

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

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

constructor(private router:Router){

}

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

constructor(private activateRouter:ActivatedRouter){

}

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

constructor(public activatedRoute: ActivatedRoute) {}

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