この質問は非常に簡単ですが、私はそれを取り除くことはできません。
<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.
}
出力エミッタ を使用できます
子コンポーネントでは、
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>
私は最近Angular 6.で同じ現象にぶつかりました。
親または祖父母のコンポーネントに属している変数にアクセスして変更したいと思いました。下の画像を参照してください。ジム(トムの子)とサラ(トムの孫)からトムに属する変数にアクセスして変更したいと思います。
他にもいくつか解決策があるかもしれませんが、私がこれを克服するために使用したアプローチはViewContainerRef
を使用することです。 ViewContainerRef
を子コンポーネントのコンストラクターに注入する必要があります。これは、親コンポーネントにアクセスし、親ノードを検索して親変数を見つける必要があるためです。
コンストラクタに注入し、
constructor(private viewContainerRef: ViewContainerRef) { }
親ノードへのアクセスとトラバース
getParentComponent() {
return this.viewContainerRef[ '_data' ].componentView.component.viewContainerRef[ '_view' ].component
}
上の画像で示したシナリオを使用してStackBlitzの例を作成しました。
https://stackblitz.com/edit/angular-comms
誰かがこれが役立つことを願っています。
ありがとうございました。
あなたの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;
}
}
});
}
}