角度、親ルートコンポーネントを取得する

Angular, get parent route component

出典: link タグ:angularangular-routingangular-activatedroute 更新時間:

  問題

私はAngular 7アプリを構築しています。 このアプリでは、ネストされたルートがあります。親ルートが使用しているコンポーネントを検出できるようにしたい。私はそれをローカルで行う方法を見つけましたが、これはプロダクションでは機能しません(出力は異なります)。

私はこの方法を使用します: 

    checkIfChild() {
    this.sub = this.route.parent.params.subscribe(params => {
      if (params['id']) {
        this.parentId = params['id'];
        if (this.route.parent.component['name'] === 'ProjectShowComponent') {
          this.parentType = 'Project';
        } else if (this.route.parent.component['name'] === 'CompanyShowComponent') {
          this.parentType = 'Company';
        } else if (this.route.parent.component['name'] === 'ContactShowComponent') {
          this.parentType = 'User';
        }
      }
    });
  }

メソッド this.route.parent.component ['name'] はローカルに名前を出力しますが、本番環境では文字 T だけを出力します。

代わりにこのメッセージが表示されます 

 TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.

親ルートが子ルートをアクティブにしたことを検出して、それを実行できるようにする正しい方法は何ですか?

  ベストアンサー

個人的には、コンポーネントインスタンスに直接結合をドロップし、代わりにルートのdataプロパティを使用します。

  • コンポーネントのインスタンスとやりとりしません。
  • コンポーネントのインスタンス型を静的値にマップします。

次のルート定義を仮定します。 

 const routes: Routes = [
  {
    path: 'production',
    component: ProductionParent,
    data: {parentRoute :'Production'},
    children: [{path: '', component: Child}] 
  },
  {
    path: 'system',
    component: SystemParent,
    data: {parentRoute :'System'},
    children: [{path: '', component: Child}] 
  }
];

@Component({})
export class ProductionParent{}

@Component({})
export class SystemParent{}

@Component({})
export class Child implements OnInit, OnDestroy {
  private parentSub = Subscription.EMPTY;
  parentRoute :string;


  constructor(private readonly route: ActivatedRoute){}

  ngOnInit(){
    this.trackParent();
  }

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

  private trackParent(){
    this.parentSub = this.route.parent
                        .data
                        .subscribe(data => this.parentRoute = data.parentRoute || 'unknown');
  }
}

これはおそらく他の方法で実装することができますが、これは私の心に来た最初の実用的なアプローチです。それが助けてくれることを願っています。

  同じタグがついた質問を見る

angularangular-routingangular-activatedroute
前へ:
次へ: