import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `
    

      
My App
      

            

            

      
    
    
  `
})

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: `
       
Show Off
       
Some contents...
   `
})

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

Suraj Rao.. 8

您可以使用输出发射器

在您的子组件中,

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

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

在父母,

export class AppComponent {
  hide = false;

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

Anjana Silva.. 5

我最近在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

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

谢谢。

您可以使用输出发射器

在您的子组件中,

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

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

在父母,

export class AppComponent {
  hide = false;

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

我最近在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

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

谢谢。