web-dev-qa-db-ja.com

親コンポーネントを子コンポーネントから変更するにはどうすればよいですか？

この質問は非常に簡単ですが、私はそれを取り除くことはできません。

<header>親テンプレート内にあり、ルーティングモジュールを介して子テンプレートを表示するときに非表示にする必要があります。 CSS経由で非表示にできるように、ヘッダータグにクラスを追加することを期待しています。これは私が持っているものです：

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `
    <header [class.hidden]="hide">
      <h1>My App</h1>
      <ul>
            <li><a href="/home"></a></li>
            <li><a href="/showoff"></a></li>
      </ul>
    </header>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  hide = false; // <-- This is what I need to change in child component
}

app-routing.module.ts

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'showoff', component: ShowOffComponent },
];

export const AppRouting = RouterModule.forRoot(routes, {
  useHash: true
});

show.offf.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-showoff',
   template: `
       <h2>Show Off</h2>
       <div>Some contents...</div>
   `
})

export class ShowOffComponent {
   hide = true; // <-- Here is the problem.
                // I don't have any idea how to reach parent variables.
}
angularangular2-routingangular-components
10
Mdkusuma

出力エミッタ を使用できます

子コンポーネントでは、

import { Component } from '@angular/core';
@Component({
   selector: 'app-showoff',
   template: `
       <h2>Show Off</h2>
       <div>Some contents...</div>
   `
})

export class ShowOffComponent {
    @Output() onHide = new EventEmitter<boolean>();
    setHide(){
       this.onHide.emit(true);
    }
}

親では、

export class AppComponent {
  hide = false;

  changeHide(val: boolean) {
    this.hide = val;
  }
}

そのイベントエミッターを持つ親に子を追加し、

<app-showoff (onHide)="changeHide($event)"></app-showoff>
11
Suraj Rao

私は最近Angular 6.で同じ現象にぶつかりました。

親または祖父母のコンポーネントに属している変数にアクセスして変更したいと思いました。下の画像を参照してください。ジム（トムの子）とサラ（トムの孫）からトムに属する変数にアクセスして変更したいと思います。

enter image description here

他にもいくつか解決策があるかもしれませんが、私がこれを克服するために使用したアプローチはViewContainerRefを使用することです。 ViewContainerRefを子コンポーネントのコンストラクターに注入する必要があります。これは、親コンポーネントにアクセスし、親ノードを検索して親変数を見つける必要があるためです。

コンストラクタに注入し、

constructor(private viewContainerRef: ViewContainerRef) { }

親ノードへのアクセスとトラバース

getParentComponent() {
    return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component
}

上の画像で示したシナリオを使用してStackBlitzの例を作成しました。

https://stackblitz.com/edit/angular-comms

誰かがこれが役立つことを願っています。

ありがとうございました。

8
Anjana Silva

あなたのapp.component.ts URLを確認し、hide変数の値を次のように設定できます。

import { Component } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app',
  template: `
    <header [class.hidden]="hide">
      <h1>My App</h1>
      <ul>
            <li><a href="/home"></a></li>
            <li><a href="/showoff"></a></li>
      </ul>
    </header>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  hide = false; // <-- This is what I need to change in child component

  constructor(private router: Router){}

  public ngOnInit() {
    this.router.events.subscribe((events) => {
      if (events instanceof NavigationStart) {
        if (events.url === '/' || events.url === '/home') {
          this.hide = false;
        } else {
          this.hide = true;
        }
      }
    });
  }

}
3
ranakrunal9