Как изменить родительскую переменную из дочернего компонента?

Question

Этот вопрос довольно прост, но я не могу избавиться от него.

У меня есть <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 
} 

АПП-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

Yo и можно использовать output emitter

вашего ребенка компонента,

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; 
onHide(val: boolean) { 
    this.hide=val; 
    } 
} 

Answer 2

В вашей 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; 
     } 
     } 
    }); 
    } 

}