如何从子组件更改父变量？

Question

这个问题很简单,但我无法摆脱它.

我有一个<header>父模板,我需要它通过路由模块显示子模板时消失.我期望在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.
}

Answer 1

您可以使用输出发射器

在您的子组件中,

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

Answer 2

我最近在Angular 6中遇到了同样的现象。

我想访问和更改属于父组件或祖父母组件的变量。参见下图。我想访问和更改属于吉姆（汤姆的孩子）和萨拉（汤姆的孙子）的汤姆所属的变量。

可能还有其他解决方案，但我用来克服此问题的方法是使用ViewContainerRef。我必须将其注入ViewContainerRef到Child组件的构造函数中，即需要访问父Component并遍历父节点（或多个节点）以找到父变量。

注入构造函数，

constructor(private viewContainerRef: ViewContainerRef) { }

访问并遍历父节点，

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

我已经用上图中给出的方案制作了一个StackBlitz示例。

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

希望有人会发现这个有用。

谢谢。